:root {
    /* Theme variables */
    --cpx-poly-text-color: #ffffff;
    --cpx-poly-muted-color: rgba(255, 255, 255, 0.7);
    --cpx-poly-accent-color: #ffa800;
    /* used for hover/focus ring */
    --cpx-poly-caret-size: 14px;
    /* caret color - change here */
    --cpx-poly-menu-bg: #032845;
    /* translucent dark for dropdown */
    --cpx-poly-border-radius: 0px;

    /* Layout/sizing */
    --cpx-poly-gap: 10px;
    --cpx-poly-icon-size: 22px;
    --cpx-poly-font-size: 18px;

    /* Shadows */
    --cpx-poly-soft-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 768px) {
    :root {
        --cpx-poly-icon-size: 14px;
        --cpx-poly-font-size: 16px;
        --cpx-poly-gap: 5px;
    }
}

.cpx-lang-switcher {
    display: inline-block;
    position: relative;
}

header button.cpx-lang-switcher__toggle {
    display: inline-flex !important;
    align-items: center;
    gap: var(--cpx-poly-gap);

    padding: 8px 0px !important;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;

    font-size: var(--cpx-poly-font-size) !important;
    font-weight: 700 !important;
    color: var(--cpx-poly-text-color);

    position: relative;

    &:hover,
    &:focus {
        color: var(--cpx-poly-text-color);
    }
}

.cpx-lang-switcher__toggle:focus-visible,
.cpx-lang-switcher__toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Caret as an SVG image */
.cpx-lang-switcher__caret {
    display: inline-flex;
    width: var(--cpx-poly-caret-size);
    height: var(--cpx-poly-caret-size);
    flex: 0 0 var(--cpx-poly-caret-size);
    line-height: 0;
    /* If caret.svg uses fill="currentColor", this will color it from the variable below */
    color: var(--cpx-poly-caret-color);
    transition: transform .12s ease-in-out;
}

.cpx-lang-switcher__caret__img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Rotate caret when open */
.cpx-lang-switcher.is-open .cpx-lang-switcher__caret {
    transform: rotate(180deg);
}

.cpx-lang-switcher__icon {
    display: inline-flex;
    width: var(--cpx-poly-icon-size);
    height: var(--cpx-poly-icon-size);
    flex: 0 0 var(--cpx-poly-icon-size);
}

.cpx-lang-switcher__icon__img {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--cpx-poly-text-color);
}

.cpx-lang-switcher__code {
    line-height: 1;
    letter-spacing: 0.02em;
}

/* Dropdown */
.cpx-lang-switcher__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    min-width: 180px;
    padding: 8px;
    margin: 0;

    list-style: none;

    background: var(--cpx-poly-menu-bg);
    backdrop-filter: blur(8px);
    border-radius: var(--cpx-poly-border-radius);
    box-shadow: var(--cpx-poly-soft-shadow);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms step-end;
    z-index: 10;
}

.cpx-lang-switcher.is-open .cpx-lang-switcher__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0ms step-start;
}

.cpx-lang-switcher__item {
    display: block;
    border-radius: 8px;
}

.cpx-lang-switcher__link,
.cpx-lang-switcher__link--current {
    display: block;

    padding: 10px 12px;
    text-decoration: none;

    font-size: 15px;
    line-height: 1.2;
    color: var(--cpx-poly-text-color) !important;
}

.cpx-lang-switcher__link:hover,
.cpx-lang-switcher__link:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.cpx-lang-switcher__item.is-active .cpx-lang-switcher__link--current {
    color: var(--cpx-poly-text-color);
    cursor: default;
    opacity: 0.9;
}

@media (hover: hover) {
    .cpx-lang-switcher__toggle:hover {
        opacity: 0.95;
    }
}