.localization-trigger {
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  text-align: inherit;
}

.localization-trigger:not(.localization-trigger--header):not(.localization-trigger--mobile-menu) {
  display: flex;
  flex-flow: row wrap;
  gap: 1.5rem;

  & p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5ch;
    color: var(--color-white);
  }

  & span {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--color-white);

    &::after {
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33.33 50'%3E%3Cpath d='M 33.332 25 L 0 0 L 0 50.001 L 33.332 25 Z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E%3C/svg%3E");
      position: relative;
      inline-size: calc(1rem / 3);
      transition: 0.2s ease-out;
    }
  }
}

.localization-trigger--header {
  display: none;
  align-items: center;

  @media (width >= 64rem) {
    display: inline-flex;
  }

  & .localization-trigger__link {
    margin-top: 0;
  }

  &:hover .link.v-secondary .cta--label::after,
  &:hover .link.v-secondary .cta--label .cta--label__text::after,
  &:focus .link.v-secondary .cta--label::after,
  &:focus .link.v-secondary .cta--label .cta--label__text::after,
  &:focus-visible .link.v-secondary .cta--label::after,
  &:focus-visible .link.v-secondary .cta--label .cta--label__text::after {
    transform: translateY(-2px);
  }
}

.localization-trigger--mobile-menu {
  padding-block-end: 1rem;

  @media (width >= 64rem) {
    display: none;
  }

  & p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    color: var(--color-black-200);
    white-space: nowrap;
  }

  & span {
    color: var(--color-black);

    &::after {
      content: none;
    }
  }

  & svg {
    block-size: 1rem;
    inline-size: 1rem;
    margin-inline-start: auto;
  }
}

.header__action-item--localization {
  display: none;
  margin-right: 8px;

  @media (width >= 64rem) {
    display: flex;
    align-items: center;
  }
}