/* attachment-icon --------------------------------------------------------*/

/* @group @variables */

[class*="a-attachment-icon"] {
--attachment-icon-size: var(--font-size-calc-quaternary);
--attachment-icon-line-height-size: 1.5rem;
--attachment-icon-padding-size: calc(var(--attachment-icon-size) * 1.25);
--attachment-position-left: 0;
--attachment-padding-position-left: var(--attachment-icon-padding-size);
--attachment-icon-color: currentColor;
}

[class*="a-attachment-icon-secondary"] {
--attachment-icon-size: .875rem;
--attachment-font-size: .875rem;
--attachment-line-height: 1.714285714;
--attachment-icon-line-height-size: 1.5rem;
}

/* @end @variable */

/* @group @attachment-icon */

[class*="a-attachment-icon"] {
position: relative;
display: block;
padding-right: var(--attachment-padding-position-right);
padding-left: var(--attachment-padding-position-left);
font-size: var(--attachment-font-size);
line-height: var(--attachment-line-height);
}

[class*="a-attachment-icon"]:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 0;
right: var(--attachment-position-right);
left: var(--attachment-position-left);
display: grid;
place-items: var(--place-items-center-primary);
width: var(--attachment-icon-size);
height: var(--attachment-icon-line-height-size);
margin: var(--attachment-margin);
color: var(--attachment-icon-color);
background-color: currentColor;
-webkit-mask-size: var(--attachment-icon-size);
-webkit-mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-size: var(--attachment-icon-size);
mask-position: center center;
mask-repeat: no-repeat;
font-weight: normal;
}

/* @end @attachment-icon */

/* --------------------------------------------------------*/

/* @group @variables - section grid */

/* @end @variables - section grid */

/* @group @m-list-contents */

.m-attachment-list-primary {
box-sizing: border-box;
display: grid;
grid-template-columns: var(--list-grid-columns);
gap: var(--list-gap-primary);
margin-top: .75rem;
}

/* @end @m-list-contents */