/**
 * @file
 * Language switcher styles.
 */

.region-title-banner .block-dwn-language-switcher {
  justify-self: end;
}

.language-switcher.item-list ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  gap: 0.675rem 0.75rem;
  margin-block: 0.5rem 0; /* Center on heading text */
  margin-inline: 0;
  padding: 0;
  list-style: none;
}
.language-switcher.item-list ul li {
  margin: 0;
  padding: 0;
}

/* Alternate language */
.language-switcher ul a {
  display: inline-block;
  background-color: var(--color-blue);
  padding: 0.3125em 1em;
  border: 1px solid hsl(60 5% 82% / 0.5);
  border-radius: 1.5rem;
  color: var(--white);
  text-decoration: none;
}
.language-switcher ul a:hover {
  background-color: var(--color-blue-dark);
  color: var(--white);
}

/* Current language */
.language-switcher ul a.is-active {
  --color-link: var(--color-blue);
  --color-link-visited: var(--color-blue);
  --color-link-hover: var(--color-blue-dark);
  --color-link-underline: var(--color-link);

  font-weight: var(--font-weight-semibold);
  padding-inline-start: 2.25em;
  background: var(--white) url("../images/icon-world-blue.svg") no-repeat 0.9em 50%;
  background-size: 0.875em auto;
  color: var(--color-link);
}





/* Mobile switcher (reverse colors) */
.region-header .block-dwn-language-switcher {
  display: none;
}

@media screen and (max-width: 1023px) {

  /* Hide banner version */
  .region-title-banner .block-dwn-language-switcher {
    display: none;
  }

  /* Show mobile menu version */
  .region-header .block-dwn-language-switcher {
    display: block;
    order: 4;
    flex: 1 1 100%;
  }

  .region-header .language-switcher.item-list ul {
    justify-content: center;
  }

  .region-header .language-switcher ul a {
    background-color: var(--gray-1);
    color: var(--color-link);
  }
  .region-header .language-switcher ul a:hover {
    background-color: var(--gray-2);
    color: var(--color-link);
  }

  .region-header .language-switcher ul a.is-active {
    background-color: var(--color-blue);
    background-image: url("../images/icon-world-white.svg");
    color: var(--white);
  }
  .region-header .language-switcher ul a.is-active:hover {
    color: var(--white);
  }
}