/* @group @variables */

[class*="m-tag-list"] {
--font-size: .75rem;
--line-height: 1.5;
--paragraph-line-height: var(--line-height);
}

[class*="a-tag-link"] {
--tag-grid-template-columns: .5rem auto;
--tag-gap: .25rem;
--tag-height: 1.875rem;
--tag-padding: 0 .75rem;
--tag-background-color: var(--color-whitesmoke);
--tag-border-color: var(--color-gainsboro);
--tag-color: var(--color-text);
}

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

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

/* @end @variables */

/* @group @m-tag-list */

[class*="m-tag-list"] {
overflow: hidden;
display: flex;
flex-wrap: wrap;
margin-top: -.375rem;
margin-right: -.375rem;
}

[class*="m-tag-list"]>li {
margin-right: .375rem;
margin-bottom: .375rem;
}

[class*="a-tag-link"] {
box-sizing: border-box;
display: inline-grid;
align-items: center;
grid-template-columns: var(--tag-grid-template-columns);
gap: var(--tag-gap);
height: var(--tag-height);
padding: var(--tag-padding);
border: 1px solid var(--tag-border-color);
}

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

[class*="a-tag-link"]:before {
content: '';
display: flex;
width: .375rem;
height: .375rem;
background-color: currentColor;
}

/* @end @m-tag-list */