/* @group @variables */

[class*="a-with-icon"] {
--grid-template-columns: auto 1fr;
--gap: .375rem;
--icon-grid-column: 1;
}

/* @end @variables */

/* @group @a-with-icon */

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

[class*="a-with-icon"] svg {
grid-column: var(--icon-grid-column);
}

/* @end @a-with-icon */

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

/* @group @variables */

[class*="a-attachment-link"] {
--grid-template-columns: 1rem 1fr;
--grid-template-rows: auto;
--gap: .75rem .375rem;
--link-padding: calc(.75rem - 1px);
--link-cursor: pointer;
--font-size: .875rem;
--line-height: 1.71428571;
--paragraph-line-height: var(--line-height);
--icon-background-color: var(--color-very-light-gray);
--icon-border-radius: 50%;
--attachment-background-color: var(--color-gainsboro);
--attachment-width: 1rem;
--attachment-height: 1rem;
--icon-width: .75rem;
--icon-height: .75rem;
--icon-fill: currentColor;
}

[class*="a-attachment-link-color"] {
--grid-template-columns: 1rem 1fr 1rem;
}

[class*="a-attachment-link-active"],
[class*="a-attachment-link-color-active"] {
--attachment-background-color: var(--color-premier);
}

[class*="a-attachment-link"]:hover,
[class*="a-attachment-link"]:focus {
--attachment-background-color: var(--color-white);
}

[class*="a-attachment-link"]:hover [class*="a-svg-check"],
[class*="a-attachment-link"]:focus [class*="a-svg-check"] {
--icon-fill: var(--color-link-action);
}

[class*="a-attachment-link"]:active {
--attachment-background-color: var(--color-white);
}

[class*="a-attachment-link"]:active [class*="a-svg-check"] {
--icon-fill: var(--color-link-activ);
}

/* @end @variables */

/* @group @a-attachment-link */

[class*="a-attachment-link"] {
display: grid;
align-items: center;
grid-template-columns: var(--grid-template-columns);
grid-template-rows: var(--grid-template-rows);
gap: var(--gap);
cursor: pointer;
}

/* @end @a-attachment-link */

/* @group @a-attachment-icon */

[class*="a-attachment-icon"] {
display: grid;
justify-content: center;
align-items: center;
width: var(--attachment-width);
height: var(--attachment-height);
background-color: var(--attachment-background-color);
border-radius: 50%;
}

/* @end @a-attachment-icon */

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

/* @group @variables */

[class*="a-attachment-color"] {
--attachment-color-width: 1rem;
--attachment-color-height: 1rem;
--background-color: var(--color-white);
--box-shadow: inset 0 0 0 1px var(--color-white);
}

a:hover [class*="a-attachment-color"],
a:focus [class*="a-attachment-color"],
button:hover [class*="a-attachment-color"],
button:focus [class*="a-attachment-color"],
label:hover [class*="a-attachment-color"],
label:focus [class*="a-attachment-color"] {
box-shadow: inset 0 0 0 1px transparent;
}

[class*="a-attachment-color-white"] {
--background-color: hsla(0, 0%, 100%, 1);
}

[class*="a-attachment-color-red"] {
--background-color: hsla(337.3, 60.1%, 60%, 1);
}

[class*="a-attachment-color-gray"] {
--background-color: hsla(0, 0%, 50%, 1);
}

[class*="a-attachment-color-black"] {
--background-color: hsla(0, 0%, 20%, 1);
}

/* @end @variables */

/* @group @a-attachment-color */

[class*="a-attachment-color"] {
box-sizing: border-box;
display: grid;
justify-content: center;
align-items: center;
width: var(--attachment-color-width);
height: var(--attachment-color-height);
background-color: var(--background-color);
border: 1px solid currentColor;
box-shadow: var(--box-shadow);
transition: var(--transition);
}

/* @end @a-attachment-color */