@layer components {
  .controls {
    display: flex;
    gap: var(--space-2xs);
  }

  .control {
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding-inline: var(--space-xs);
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease),
      transform var(--speed) var(--ease);
  }

  .control:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .control:active {
    transform: scale(0.94);
  }

  .control__icon svg {
    overflow: visible;
  }

  .control__sun,
  .control__rays {
    transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
    transform-box: fill-box;
    transform-origin: center;
  }

  .control__moon {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.4);
    transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease);
  }

  [data-theme="dark"] .control__sun,
  [data-theme="dark"] .control__rays {
    opacity: 0;
    transform: scale(0.4) rotate(45deg);
  }

  [data-theme="dark"] .control__moon {
    opacity: 1;
    transform: scale(1);
  }
}