/* Change color to signal activ when hover */
div.wp-block-ermisch-block-custom-language-switcher:hover {
  background-color: var(--wp--preset--color--background) !important;
  color: var(--wp--preset--color--foreground) !important;
}

/* A little bit more space for the lan items */
div.wp-block-ermisch-block-custom-language-switcher
  .dropdown-options
  a.language-link {
  padding: var(--wp--preset--spacing--xs-12-r);
}

/* Reapply borders in hover state; make normal positioning when nav menu is open so nav menu expands down */
header
  .nav_item_wrapper.is-open
  div.wp-block-ermisch-block-custom-language-switcher {
  display: flex;
  flex-direction: column;
}

header
  .nav_item_wrapper.is-open
  div.wp-block-ermisch-block-custom-language-switcher:hover,
header
  .nav_item_wrapper.is-open
  div.wp-block-ermisch-block-custom-language-switcher:focus-within {
  border-bottom-right-radius: var(
    --borderRadius-bottomRight-desktop
  ) !important;
  border-bottom-left-radius: var(--borderRadius-bottomLeft-desktop) !important;
}

header
  .nav_item_wrapper.is-open
  div.wp-block-ermisch-block-custom-language-switcher
  .dropdown-options {
  position: unset;
  border-top: inherit;
  border-top-right-radius: inherit;
  border-top-left-radius: inherit;
}

@media (max-width: 1024px) {
  header
    .nav_item_wrapper.is-open
    div.wp-block-ermisch-block-custom-language-switcher:hover,
  header
    .nav_item_wrapper.is-open
    div.wp-block-ermisch-block-custom-language-switcher:focus-within {
    border-bottom-right-radius: var(
      --borderRadius-topRight-tablet,
      var(--borderRadius-topRight-desktop)
    ) !important;
    border-bottom-left-radius: var(
      --borderRadius-topLeft-tablet,
      var(--borderRadius-topLeft-desktop)
    ) !important;
  }
}

@media (max-width: 640px) {
  header
    .nav_item_wrapper.is-open
    div.wp-block-ermisch-block-custom-language-switcher:hover,
  header
    .nav_item_wrapper.is-open
    div.wp-block-ermisch-block-custom-language-switcher:focus-within {
    border-bottom-right-radius: var(
      --borderRadius-topRight-mobile,
      var(--borderRadius-topRight-tablet, var(--borderRadius-topRight-desktop))
    ) !important;
    border-bottom-left-radius: var(
      --borderRadius-topLeft-mobile,
      var(--borderRadius-topLeft-tablet, var(--borderRadius-topLeft-desktop))
    ) !important;
  }
}