/*
 * Appearance settings styles
 * Theme and accent color picker UI
 */
@layer components {
  /* Theme options */
  .theme-options {
    display: flex;
    gap: var(--inline-space);
  }

  .theme-option {
    align-items: center;
    background: var(--surface-0);
    border: 2px solid var(--border-on-surface-1);
    border-radius: 0.5rem;
    color: var(--text-on-surface-0);
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: var(--block-space);
    transition: border-color 150ms var(--ease-out-expo),
                background-color 150ms var(--ease-out-expo);

    &:hover {
      border-color: var(--color-link);
    }

    &.is-active {
      border-color: var(--color-link);
      background: var(--color-selected);
    }

    svg {
      block-size: 1.5rem;
      inline-size: 1.5rem;
    }

    span {
      font-size: var(--text-small);
      font-weight: 500;
    }
  }

  /* Accent color options */
  .accent-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    justify-content: center;
  }

  .accent-option {
    block-size: 2.5rem;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    inline-size: 2.5rem;
    position: relative;
    transition: transform 150ms var(--ease-out-expo),
                box-shadow 150ms var(--ease-out-expo);

    &:hover {
      transform: scale(1.1);
    }

    &.is-active {
      box-shadow: 0 0 0 2px var(--color-canvas), 0 0 0 4px currentColor;
    }

    &::after {
      border: 2px solid white;
      border-radius: 50%;
      content: "";
      inset: 2px;
      opacity: 0;
      position: absolute;
      transition: opacity 150ms var(--ease-out-expo);
    }

    &.is-active::after {
      opacity: 1;
    }
  }

  .accent-option--red {
    background: oklch(var(--lch-red-dark));
    color: oklch(var(--lch-red-dark));
  }

  .accent-option--pink {
    background: oklch(var(--lch-pink-dark));
    color: oklch(var(--lch-pink-dark));
  }

  .accent-option--purple {
    background: oklch(var(--lch-purple-dark));
    color: oklch(var(--lch-purple-dark));
  }

  .accent-option--violet {
    background: oklch(var(--lch-violet-dark));
    color: oklch(var(--lch-violet-dark));
  }

  .accent-option--blue {
    background: oklch(var(--lch-blue-dark));
    color: oklch(var(--lch-blue-dark));
  }

  .accent-option--aqua {
    background: oklch(var(--lch-aqua-dark));
    color: oklch(var(--lch-aqua-dark));
  }

  .accent-option--green {
    background: oklch(var(--lch-green-dark));
    color: oklch(var(--lch-green-dark));
  }

  .accent-option--yellow {
    background: oklch(var(--lch-yellow-dark));
    color: oklch(var(--lch-yellow-dark));
  }
}

/* Accent color overrides */
html[data-accent="red"] {
  --color-accent: oklch(var(--lch-red-dark));
  --color-accent-surface: oklch(var(--lch-red-light));
  --color-link: oklch(var(--lch-red-dark));
  --color-selected-light: oklch(var(--lch-red-lightest));
  --color-selected: oklch(var(--lch-red-lighter));
  --color-selected-dark: oklch(var(--lch-red-light));
}

html[data-accent="pink"] {
  --color-accent: oklch(var(--lch-pink-dark));
  --color-accent-surface: oklch(var(--lch-pink-light));
  --color-link: oklch(var(--lch-pink-dark));
  --color-selected-light: oklch(var(--lch-pink-lightest));
  --color-selected: oklch(var(--lch-pink-lighter));
  --color-selected-dark: oklch(var(--lch-pink-light));
}

html[data-accent="purple"] {
  --color-accent: oklch(var(--lch-purple-dark));
  --color-accent-surface: oklch(var(--lch-purple-light));
  --color-link: oklch(var(--lch-purple-dark));
  --color-selected-light: oklch(var(--lch-purple-lightest));
  --color-selected: oklch(var(--lch-purple-lighter));
  --color-selected-dark: oklch(var(--lch-purple-light));
}

html[data-accent="violet"] {
  --color-accent: oklch(var(--lch-violet-dark));
  --color-accent-surface: oklch(var(--lch-violet-light));
  --color-link: oklch(var(--lch-violet-dark));
  --color-selected-light: oklch(var(--lch-violet-lightest));
  --color-selected: oklch(var(--lch-violet-lighter));
  --color-selected-dark: oklch(var(--lch-violet-light));
}

html[data-accent="blue"] {
  --color-accent: oklch(var(--lch-blue-dark));
  --color-accent-surface: oklch(var(--lch-blue-light));
  --color-link: oklch(var(--lch-blue-dark));
  --color-selected-light: oklch(var(--lch-blue-lightest));
  --color-selected: oklch(var(--lch-blue-lighter));
  --color-selected-dark: oklch(var(--lch-blue-light));
}

html[data-accent="aqua"] {
  --color-accent: oklch(var(--lch-aqua-dark));
  --color-accent-surface: oklch(var(--lch-aqua-light));
  --color-link: oklch(var(--lch-aqua-dark));
  --color-selected-light: oklch(var(--lch-aqua-lightest));
  --color-selected: oklch(var(--lch-aqua-lighter));
  --color-selected-dark: oklch(var(--lch-aqua-light));
}

html[data-accent="green"] {
  --color-accent: oklch(var(--lch-green-dark));
  --color-accent-surface: oklch(var(--lch-green-light));
  --color-link: oklch(var(--lch-green-dark));
  --color-selected-light: oklch(var(--lch-green-lightest));
  --color-selected: oklch(var(--lch-green-lighter));
  --color-selected-dark: oklch(var(--lch-green-light));
}

html[data-accent="yellow"] {
  --color-accent: oklch(var(--lch-yellow-dark));
  --color-accent-surface: oklch(var(--lch-yellow-light));
  --color-link: oklch(var(--lch-yellow-dark));
  --color-selected-light: oklch(var(--lch-yellow-lightest));
  --color-selected: oklch(var(--lch-yellow-lighter));
  --color-selected-dark: oklch(var(--lch-yellow-light));
}