.language-switcher {
  --ls-base-color: black;
  --ls-hover-color: white;
  --ls-text-color: var(--ls-base-color);
  --ls-bg-color: var(--ls-hover-color);
  --ls-border-color: var(--ls-base-color);
  --ls-hover-text-color: var(--ls-hover-color);
  --ls-hover-bg-color: var(--ls-base-color);

  display: flex;
  text-align: left;
  position: relative;
}

.language-switcher__opener {
  display: flex;
  align-items: center;
  color: var(--ls-text-color);
  font-size: 1rem;
  background: var(--ls-bg-color);
  border: 1px solid var(--ls-border-color);
  position: relative;
  min-width: 3.5rem;
  margin: 0;
  padding: 0.3rem 1.25rem 0.3rem 0.4rem;
  cursor: pointer;

  &:focus {
    outline: auto;
  }

  &::after {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    width: .5rem;
    height: .5rem;
    border-left: 0.1875rem solid var(--ls-base-color);
    border-bottom: 0.1875rem solid var(--ls-base-color);
    transform: translateY(calc(-50% - 2px)) rotate(-45deg);
    content: '';
  }

  &[aria-expanded='true'] {
    &::after {
      transform: translateY(calc(-50% + 1px)) rotate(135deg);
    }

    + .language-switcher__list {
      display: block;
    }
  }
}

.language-switcher__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  margin-top: -1px;
  background: var(--ls-bg-color);
  border: solid var(--ls-border-color);
  border-width: 0 1px 1px;
}

.language-switcher__link {
  display: flex;
  width: 100%;
  padding: .4rem .5rem .2rem;
  color: var(--ls-text-color);
  text-decoration: none;

  &:hover {
    color: var(--ls-hover-text-color);
    background: var(--ls-hover-bg-color);
  }

  &:focus {
    outline: auto;
  }
}

.language-switcher__flag {
  width: 1.75rem;
  height: 1.25rem;
  margin-right: .5rem;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}