.zd-lsw {
--zd-lsw-gap: 0.5rem;
--zd-lsw-radius: 999px;
--zd-lsw-border-color: currentColor;
--zd-lsw-active-color: inherit;
--zd-lsw-active-bg: transparent;
color: var(--zd-lsw-color, inherit);
font-size: var(--zd-lsw-font-size, inherit);
}
.zd-lsw__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--zd-lsw-gap);
margin: 0;
padding: 0;
list-style: none;
}
.zd-lsw--vertical .zd-lsw__list {
flex-direction: column;
align-items: flex-start;
}
.zd-lsw__item {
margin: 0;
}
.zd-lsw__link {
display: inline-flex;
align-items: center;
gap: 0.35em;
color: inherit;
text-decoration: none;
}
.zd-lsw__link:hover .zd-lsw__name,
.zd-lsw__link:focus-visible .zd-lsw__name {
text-decoration: underline;
}
.zd-lsw__link:focus-visible,
.zd-lsw__toggle:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.zd-lsw__item--current > .zd-lsw__link {
color: var(--zd-lsw-active-color);
background: var(--zd-lsw-active-bg);
font-weight: 700;
}
.zd-lsw__item--missing > .zd-lsw__link {
opacity: 0.75;
}
.zd-lsw__flag {
display: inline-block;
font-size: 1.15em;
line-height: 1;
vertical-align: middle;
} .zd-lsw__flag--small {
font-size: 0.9em;
}
.zd-lsw__flag--large {
font-size: 1.6em;
}
.zd-lsw__flag--rounded {
clip-path: inset(0.12em 0 round 0.18em);
}
.zd-lsw__flag--square {
clip-path: inset(0.12em 0.22em);
}
.zd-lsw__flag--circle {
clip-path: circle(0.36em at 50% 50%);
}
.zd-lsw__code {
text-decoration: none;
font-variant: all-small-caps;
letter-spacing: 0.04em;
} .zd-lsw__sr {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
} .zd-lsw--pills .zd-lsw__link,
.zd-lsw--buttons .zd-lsw__link,
.zd-lsw--codes .zd-lsw__link {
padding-block: 0.3em;
padding-inline: 0.8em;
border: 1px solid var(--zd-lsw-border-color);
border-radius: var(--zd-lsw-radius);
background: var(--zd-lsw-background, transparent);
}
.zd-lsw--buttons,
.zd-lsw--codes {
--zd-lsw-radius: 0.3rem;
} .zd-lsw--buttons .zd-lsw__item--current > .zd-lsw__link,
.zd-lsw--pills .zd-lsw__item--current > .zd-lsw__link,
.zd-lsw--codes .zd-lsw__item--current > .zd-lsw__link {
border-width: 2px;
} .zd-lsw__menu {
position: relative;
display: inline-block;
}
.zd-lsw__toggle {
display: inline-flex;
align-items: center;
gap: 0.35em;
padding-block: 0.35em;
padding-inline: 0.8em;
border: 1px solid var(--zd-lsw-border-color);
border-radius: 0.3rem;
background: var(--zd-lsw-background, transparent);
cursor: pointer;
list-style: none;
}
.zd-lsw__toggle::-webkit-details-marker {
display: none;
}
.zd-lsw__toggle::after {
content: "";
inline-size: 0.45em;
block-size: 0.45em;
margin-inline-start: 0.2em;
border-block-end: 2px solid currentColor;
border-inline-end: 2px solid currentColor;
transform: rotate(45deg) translateY(-0.15em);
}
.zd-lsw__menu[open] > .zd-lsw__toggle::after {
transform: rotate(225deg);
}
.zd-lsw__menu > .zd-lsw__list {
position: absolute;
inset-block-start: calc(100% + 0.25rem);
inset-inline-start: 0;
z-index: 99991;
flex-direction: column;
align-items: stretch;
gap: 0;
min-inline-size: 100%;
padding-block: 0.25rem;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.3rem;
background: var(--zd-lsw-background, #fff);
color: var(--zd-lsw-color, #1d2327);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.zd-lsw__menu > .zd-lsw__list .zd-lsw__link {
display: flex;
padding-block: 0.4em;
padding-inline: 0.9em;
white-space: nowrap;
} .zd-lsw--floating {
position: fixed;
z-index: 99989;
}
.zd-lsw--bottom-end {
inset-block-end: 1rem;
inset-inline-end: 1rem;
}
.zd-lsw--bottom-start {
inset-block-end: 1rem;
inset-inline-start: 1rem;
}
.zd-lsw--top-end {
inset-block-start: 1rem;
inset-inline-end: 1rem;
}
.zd-lsw--top-start {
inset-block-start: 1rem;
inset-inline-start: 1rem;
}
.zd-lsw--floating .zd-lsw__toggle {
background: var(--zd-lsw-background, #fff);
color: var(--zd-lsw-color, #1d2327);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.zd-lsw--bottom-end > .zd-lsw__menu > .zd-lsw__list,
.zd-lsw--bottom-start > .zd-lsw__menu > .zd-lsw__list {
inset-block-start: auto;
inset-block-end: calc(100% + 0.25rem);
}
.zd-lsw--bottom-end > .zd-lsw__menu > .zd-lsw__list,
.zd-lsw--top-end > .zd-lsw__menu > .zd-lsw__list {
inset-inline-start: auto;
inset-inline-end: 0;
} .zd-lsg {
position: fixed;
inset-block-end: 1rem;
inset-inline: 1rem;
margin-inline: auto;
z-index: 99990;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
max-inline-size: 40rem;
inline-size: fit-content;
padding-block: 0.75rem;
padding-inline: 1rem;
border-radius: 0.5rem;
background: #1d2327;
color: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
font-size: 0.95rem;
line-height: 1.4;
} @media (max-width: 40rem) {
.zd-lsg {
inset-block-end: 6rem;
}
}
.zd-lsg__text {
margin: 0;
flex: 1 1 12rem;
}
.zd-lsg__go {
display: inline-block;
padding-block: 0.4rem;
padding-inline: 0.9rem;
border-radius: 0.375rem;
background: #fff;
color: #1d2327;
font-weight: 600;
text-decoration: none;
}
.zd-lsg__go:focus-visible,
.zd-lsg__close:focus-visible {
outline: 2px solid #72aee6;
outline-offset: 2px;
}
.zd-lsg__close {
min-inline-size: 2.25rem;
min-block-size: 2.25rem;
border: 0;
border-radius: 0.375rem;
background: transparent;
color: inherit;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
.zd-lsg {
animation: zd-lsg-in 0.2s ease-out;
}
}
@keyframes zd-lsg-in {
from {
opacity: 0;
}
}