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

/* Hide the menu item until the JavaScript has initialized it to prevent FOUC */
[data-loading] {
  visibility: hidden;
}

/* 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;
  box-shadow: none !important;
}

.clonable-language-switcher-shortcode
  #menu-navlinks
  .cl-language-switcher-lan-flag.fflag.ff-md {
  height: 18px !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;
}

.clonable-language-switcher-shortcode .sub-menu .cl-language-switcher-lan-flag {
  opacity: 0.7;
  box-shadow: none !important;
}

.clonable-language-switcher-shortcode
  .sub-menu
  .cl-language-switcher-link:hover
  .cl-language-switcher-lan-flag,
.clonable-language-switcher-shortcode
  .sub-menu
  .cl-language-switcher-link:focus-visible
  .cl-language-switcher-lan-flag {
  opacity: 1;
}

/* 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 * {
  color: #333;
  text-decoration: none !important;
}

.clonable-language-switcher-shortcode
  .clonable-menu-item-language-switcher
  > svg {
  align-self: center;
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 1em !important;
  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;
  background: #fff !important;
}

.clonable-language-switcher-shortcode.clonable-language-navigation > .menu {
  width: fit-content;
  padding: 4px 8px !important;
  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: 4px 8px !important;
  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;
  z-index: 999;
}

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

@media only screen and (min-width: 779px) {
  .clonable-language-switcher-shortcode.clonable-language-navigation > .menu {
    border: 0px solid rgba(0, 0, 0, 0) !important;
    background: rgba(255, 255, 255, 0) !important;
  }
}