.idmtk-switcher {
display: inline-block;
font-size: 0.875rem;
line-height: 1;
}
.idmtk-switcher__list {
list-style: none;
margin: 0;
padding: 0;
}
.idmtk-switcher__item {
margin: 0;
}
.idmtk-switcher__link {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.35em 0.5em;
text-decoration: none;
color: inherit;
border-radius: 4px;
}
.idmtk-switcher__link:hover,
.idmtk-switcher__link:focus-visible {
background: rgba(0, 0, 0, 0.06);
}
.idmtk-switcher__link--current {
font-weight: 600;
}
.idmtk-switcher__flag {
display: inline-block;
width: 20px;
height: 14px;
border-radius: 2px;
object-fit: cover;
} .idmtk-switcher--inline .idmtk-switcher__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25em;
}
.idmtk-switcher--inline .idmtk-switcher__item--current .idmtk-switcher__link {
pointer-events: none;
opacity: 0.7;
} .idmtk-switcher--dropdown {
position: relative;
}
.idmtk-switcher__button {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.45em 0.7em;
font: inherit;
color: inherit;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
cursor: pointer;
}
.idmtk-switcher__button:hover,
.idmtk-switcher__button:focus-visible {
background: rgba(0, 0, 0, 0.04);
}
.idmtk-switcher__caret {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform 0.15s ease;
}
.idmtk-switcher__button[aria-expanded="true"] .idmtk-switcher__caret {
transform: rotate(180deg);
}
.idmtk-switcher--dropdown .idmtk-switcher__list {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 100%;
padding: 0.25em;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
z-index: 1000;
}
.idmtk-switcher--dropdown .idmtk-switcher__link {
display: flex;
white-space: nowrap;
} .idmtk-floating {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 9999;
}
.idmtk-floating .idmtk-switcher__button {
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.idmtk-floating .idmtk-switcher__list {
top: auto;
bottom: calc(100% + 4px);
right: 0;
left: auto;
} .idmtk-menu-item .idmtk-switcher {
vertical-align: middle;
}