:root {
    --clonable-language-switcher-radius: 6px;
    --clonable-language-switcher-padding-y: 8px;
    --clonable-language-switcher-padding-x: 12px;
    --clonable-language-switcher-gap: 8px;
    --clonable-language-switcher-bg-hover: rgba(0, 0, 0, 0.06);
    --clonable-language-switcher-outline: 2px solid rgba(0, 0, 0, 0.35);
    --clonable-language-switcher-outline-offset: 2px;
    --clonable-language-switcher-flag-radius: 50%;
    --clonable-language-switcher-fflag-size: 1.25rem;
    --clonable-language-switcher-lan-container-gap: 8px;
    --clonable-language-switcher-lan-container-line-height: 1.2;
}

/* Menu item */
.cl-language-switcher-menu-item {
    border-radius: var(--clonable-language-switcher-radius);
    transition: background-color 0.2s ease;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cl-language-switcher-menu-item:hover,
.cl-language-switcher-menu-item:focus-within {
    background-color: var(--clonable-language-switcher-bg-hover);
}

/* Link */
.cl-language-switcher-link {
    display: flex;
    align-items: center;
    gap: var(--clonable-language-switcher-gap);
    width: 100% !important;
    padding: var(--clonable-language-switcher-padding-y)
        var(--clonable-language-switcher-padding-x);
    color: inherit;
    text-decoration: none;
    border-radius: var(--clonable-language-switcher-radius);
    outline: none;
    border: none;
}

.cl-language-switcher-link:focus-visible {
    outline: var(--clonable-language-switcher-outline);
    outline-offset: var(--clonable-language-switcher-outline-offset);
}

/* Language container */
.cl-language-switcher-lan-container {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: var(--clonable-language-switcher-lan-container-gap);
    line-height: var(--clonable-language-switcher-lan-container-line-height);
}

/* Flag */
.cl-language-switcher-lan-flag {
    display: inline-block;
}

.cl-language-switcher-lan-flag.ff-rounded,
.clonable-menu-item-language-switcher .fflag.ff-rounded {
    border-radius: var(--clonable-language-switcher-flag-radius);
}

/* MD size fflag overrides */
.clonable-language-switcher-block-submenu-item .fflag.ff-md,
.clonable-language-switcher-block-submenu .fflag.ff-md,
.clonable-language-switcher-shortcode .cl-language-switcher-lan-flag.fflag.ff-md,
.clonable-language-switcher i.fflag.ff-md,
.clonable-language-switcher > .fflag.ff-square.ff-md,
.clonable-language-switcher > .fflag.ff-rounded.ff-md,
.clonable-language-switcher-shortcode .clonable-menu-item-language-switcher > .fflag.ff-md,
.clonable-language-switcher-shortcode .clonable-menu-item-language-switcher > .fflag.ff-square.ff-md,
.clonable-language-switcher-shortcode .clonable-menu-item-language-switcher > .fflag.ff-rounded.ff-md {
    width: var(--clonable-language-switcher-fflag-size) !important;
    height: var(--clonable-language-switcher-fflag-size) !important;
}

/* Menu item link overrides */
.clonable-menu-item-language-switcher a {
    text-decoration: none !important;
}

.clonable-menu-item-language-switcher > a {
    display: inline-block !important;
    vertical-align: middle !important;
}

.clonable-menu-item-language-switcher > a::after {
    display: none !important;
}

.clonable-language-switcher-shortcode .clonable-menu-item-language-switcher > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--clonable-language-switcher-gap) !important;
}

/* Navigation block */
.clonable-language-navigation > .menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--clonable-language-switcher-gap) !important;
    list-style: none;
}

.clonable-language-switcher-block-submenu {
    min-width: 240px !important;
    left: 0 !important;
    right: auto !important;
}

.clonable-language-switcher-block-submenu
    .wp-block-navigation-item
    .wp-block-navigation-item__content,
.clonable-language-switcher-block-submenu-item > a {
    display: flex !important;
    align-items: center !important;
    gap: var(--clonable-language-switcher-gap) !important;
}

/* Shortcode language switcher */
.clonable-language-switcher-shortcode {
    position: relative;
}

.clonable-language-switcher-shortcode
    .clonable-menu-item-language-switcher
    > svg {
    align-self: center;
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin-left: 0.25em;
    margin-top: 0.075em;
    color: currentColor;
    stroke: currentColor;
    line-height: 0;
}

.clonable-language-switcher-shortcode .sub-menu .cl-language-switcher-link {
    padding: var(--clonable-language-switcher-padding-y) 0;
    white-space: nowrap;
}

.clonable-language-switcher-shortcode.clonable-language-navigation > .menu {
    width: fit-content;
    padding: var(--clonable-language-switcher-padding-x);
    border: 1px solid #ccc;
    border-radius: var(--clonable-language-switcher-radius);
    background: #fff;
    overflow: visible;
    margin: inherit;
    position: relative;
    max-height: unset;
}

.clonable-language-switcher-shortcode .sub-menu {
    display: none;
    position: absolute;
    padding: 4% var(--clonable-language-switcher-padding-x);
    margin: 0;
    list-style: none;
    left: -1px;
    top: 94% !important;
    border: 1px solid #ccc;
    border-radius: 0 0 var(--clonable-language-switcher-radius)
        var(--clonable-language-switcher-radius);
    background: #fff;
    min-width: calc(100% + 2px);
    box-sizing: border-box;
}

.clonable-language-switcher-shortcode.is-hovered
    .clonable-menu-item-language-switcher
    > .sub-menu {
    display: block;
}