: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;
} .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);
} .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);
} .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);
} .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);
} .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;
} .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;
} .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;
} .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;
}