@layer components {
  #theme-selector {
    display: flex;
    justify-self: start;
    align-items: center;
    gap: .25rem;
    padding: .25rem;
    border-radius: 999px;
    background-color: color-mix(in oklch, var(--clr-border) 40%, transparent);

    button {
      display: grid;
      place-items: center;
      appearance: none;
      border: none;
      border-radius: 999px;
      padding: .375rem;
      background: transparent;
      color: inherit;
      transition: background-color .2s, color .2s;

      &:hover {
        cursor: pointer;
      }

      &:focus-visible {
        outline: 2px solid var(--clr-text);
        outline-offset: 2px;
      }

      svg {
        width: 1.5rem;
        height: 1.5rem;
        fill: currentcolor;
      }

      @media (hover: hover) {
        &:hover {
          background-color: color-mix(in oklch, var(--clr-border) 70%, transparent);
        }

        &[aria-pressed="true"]:hover {
          background-color: var(--clr-text);
        }
      }

      &[aria-pressed="true"] {
        background-color: var(--clr-text);
        color: var(--clr-background);
      }
    }
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  ::view-transition-group(changing-theme) {
    animation-duration: 1.25s;
  }

  ::view-transition-new(changing-theme),
  ::view-transition-old(changing-theme) {
    mix-blend-mode: normal;
  }

  ::view-transition-new(changing-theme) {
    animation-name: reveal;
  }

  ::view-transition-old(changing-theme) {
    animation: none;
  }

  @keyframes reveal {
    from {
      clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
    }

    to {
      clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
    }
  }
}