.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.lang-toggle__option {
  position: relative;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1rem;

  &::after {
    content: "";
    position: absolute;
    inset: -8px -12px;
    background: url("../assets/img/scribbles/toggle.svg") center / contain
      no-repeat;
    filter: brightness(0) saturate(100%) invert(74%) sepia(51%) saturate(463%)
      hue-rotate(103deg) brightness(96%);
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.3s ease;
  }

  &:hover::after {
    clip-path: inset(0);
  }
}

.lang-toggle__option--de::after {
  transform: rotate(180deg);
}

.lang-toggle__option--active {
  color: var(--highlight-color-3-blue);
  font-weight: bolder;

  &::after {
    display: none;
  }
}

.lang-toggle__switch {
  position: relative;
  width: 2rem;
  height: 1rem;
}

.lang-toggle__input {
  width: 0;
  height: 0;
  opacity: 0;

  &:checked + .lang-toggle__slider::before {
    transform: translateX(1rem) translateY(-50%);
  }

  &:focus-visible + .lang-toggle__slider {
    outline: 2px solid var(--base-color-bright);
    outline-offset: 4px;
  }
}

.lang-toggle__slider {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 0.5rem;
  border: 1px solid var(--base-color-bright);
  border-radius: 2rem;
  background-color: var(--highlight-color-3-blue);
  transform: translateY(-50%);

  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--base-color-dark);
    border-radius: 50%;
    background-color: var(--highlight-color-2-teal);
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }
}