@layer components {
  .toggler--toggled {
    .toggler__visible-when-off {
      display: none;
    }

    .toggler__visible-when-on {
      display: unset;
    }
  }

  .toggler__visible-when-on {
    display: none;
  }

  .switch {
    --switch-color: var(--text-light);

    block-size: 1.75em;
    border-radius: 2em;
    display: inline-flex;
    inline-size: 3em;
    position: relative;

    &:has(:focus-visible) {
      .switch__btn {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
      }
    }
  }

  .switch__input {
    block-size: 0;
    inline-size: 0;
    opacity: 0.1;
  }

  .switch__btn {
    background-color: var(--switch-color);
    border-radius: 2em;
    cursor: pointer;
    inset: 0;
    position: absolute;
    transition: 150ms ease;

    &::before {
      background-color: var(--bg);
      block-size: 1.35em;
      border-radius: 50%;
      content: "";
      inline-size: 1.35em;
      inset-block-end: 0.2em;
      inset-inline-start: 0.2em;
      position: absolute;
      transition: 150ms ease;
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: color-mix(in srgb, var(--switch-color) 80%, var(--text));
      }
    }

    .switch__input:checked + & {
      --switch-color: var(--accent);

      &::before {
        transform: translateX(1.2em);
      }
    }

    .switch__input:disabled + & {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
}