theme-icon.module.scss

@import "https://unpkg.com/open-props/easings.min.css";

$motionOK: "(prefers-reduced-motion: no-preference)";

.icon {
  transition: opacity 0.25s ease-in-out;
  & > :is(.moon, .sun, .beams) {
    transform-origin: center center;
  }

  & > :is(.moon, .sun) {
    fill: var(--icon-fill);

    .toggle:is(:hover, :focus-visible) > & {
      opacity: 1;
    }
  }

  & > .beams {
    stroke: var(--icon-fill);
    stroke-width: 2px;

    .toggle:is(:hover, :focus-visible) & {
      stroke: var(--icon-fill);
    }
  }

  [data-label="system"] & {
    & > .sun {
      // transform: scale(1.5);
      transition-timing-function: ease-in-out;
      transition-duration: 0.25s;
    }

    & > .beams {
      // transform: scale(1.2);
      transition-duration: 0.15s;
    }

    & > .moon > circle {
      transform: translateX(-7px);

      @supports (cx: 1) {
        transform: translateX(0);
        cx: 17;
      }
    }
  }

  [data-theme="dark"] & {
    & > .sun {
      transform: scale(1.75);
    }

    & > .beams {
      opacity: 0;
    }

    & > .moon > circle {
      transform: translateX(-7px);

      @supports (cx: 1) {
        transform: translateX(0);
        cx: 17;
      }
    }
  }

  @media #{$motionOK} {
    & > .sun {
      transition: transform 0.5s ease-in-out;
    }

    & > .beams {
      transition:
        transform 0.5s ease-in-out,
        opacity 0.5s ease-in-out;
    }

    & .moon > circle {
      transition: transform 0.25s ease-in-out;

      @supports (cx: 1) {
        transition: cx 0.25s ease-in-out;
      }
    }

    [data-theme="dark"] & {
      & > .sun {
        // display: none;
        transform: scale(1.75);
        transition-timing-function: ease-in-out;
        transition-duration: 0.25s;
      }

      & > .beams {
        transform: rotateZ(-30deg);
        transition-duration: 0.15s;
      }

      & > .moon > circle {
        transition-delay: 0.25s;
        transition-duration: 0.5s;
      }
    }
  }
}

.toggle {
  --size: 36px;
  --icon-fill: var(--background);

  background: none;
  border: none;

  inline-size: var(--size);
  block-size: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;

  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  outline-offset: 5px;

  & > svg {
    inline-size: 100%;
    block-size: 100%;
    stroke-linecap: round;
  }

  @media (hover: none) {
    --size: 48px;
  }
}