/* @group @variables */

[class*="m-user-voice"] {
--voice-columns: repeat(1, 1fr);
--voice-gap: .75rem;
--voice-message-margin-push: auto;
--voice-message-padding: calc(.75rem - 1px);
--voice-message-border-radius: .125rem;
--text-block-margin-bottom: 0;
}

@media all and (max-width: 47.9375em) {

[class*="m-user-voice"] {
--voice-message-max-size: 24rem;
}

}

/* @end @variables */

/* @group @m-user-voice */

[class*="m-user-voice"] {
display: grid;
align-content: start;
grid-template-columns: var(--voice-columns);
grid-template-rows: var(--voice-rows);
gap: var(--voice-gap);
max-width: var(--voice-message-max-size);
margin-right: var(--voice-message-margin-push);
margin-left: var(--voice-message-margin-push);
padding:var(--voice-padding);
background-color: var(--voice-background-color);
border-radius: var(--voice-border-radius);
}

/* @end @m-user-voice */

/* @group @a-user-voice-message */

[class*="a-user-voice-message"] {
box-sizing: border-box;
width: 100%;
padding: var(--voice-message-padding);
border: 1px solid var(--color-gainsboro);
border-radius: var(--voice-message-border-radius);
}

/* @end @a-user-voice-message */

/* @group @variables */

[class*="a-voice-user"] {
--voice-user-columns: var(--voice-user-icon-size) 1fr;
--voice-user-icon-size: 4.5rem;
--voice-user-gap: .75rem;
--voice-message-padding: calc(.75rem - 1px);
--voice-message-border-radius: .75rem;
--text-block-margin-bottom: 0;
}

/* @end @variables */

/* @group @a-voice-user */

[class*="a-voice-user"] {
display: grid;
align-items: center;
grid-template-columns: var(--voice-user-columns);
gap: var(--voice-user-gap);
}

[class*="a-voice-user"] div {
box-sizing: border-box;
position: relative;
overflow: hidden;
width: var(--voice-user-icon-size);
height: var(--voice-user-icon-size);
border: 1px solid var(--color-gainsboro);
border-radius: 50%;
}

[class*="a-voice-user"] img {
height: var(--voice-user-icon-size);
}

[class*="a-voice-user"] dl {
display: grid;
align-items: center;
grid-template-columns: repeat(1, 1fr);
gap: .375rem;

}

[class*="a-voice-user"] dt {
font-weight: var(--text-font-weight-bold);
}

[class*="a-voice-user"] dd {
font-size: .85rem;
line-height: 1.714285714;
color: var(--color-dimgray);
word-break: keep-all;
}

/* @end @a-voice-user */