mk-mus {--icon-size: 1.2rem;
--closed-size: calc(1.5 * var(--icon-size));
--gap-size: 0.5ch;
--max-icon-count: 5;
--anim-duration: 0.5s;
display: inline-flex;
flex-direction: row;
gap: var(--gap-size);
padding-right: var(--gap-size);
border-radius: var(--icon-size);
height: var(--icon-size);
background: grey;
overflow: hidden;
vertical-align: top;
box-shadow: inset 0 0 var(--gap-size) 2px black;
transition: max-width var(--anim-duration);
margin: 0;
> button {
display: none;
border: 0;
width: var(--icon-size);
height: var(--icon-size);
border-radius: var(--icon-size);
background: #cfc;
color: black;
vertical-align: top;
flex: 0 0 auto;
transition: background var(--anim-duration);
}
&:has(a[aria-disabled="false"]) > button {
background: #555;
}
&:has(a[aria-disabled="false"]) {
max-width: calc( (var(--icon-size) + var(--gap-size)) * var(--max-icon-count));
}
&:has(a[aria-disabled="true"]) {
max-width: var(--closed-size);
}
&:has(a[aria-disabled="true"]) > button, &:has(a[aria-disabled="false"]) > button {
display: revert-layer;
}
}