@layer components {
  .button {
    @apply border;
    @apply border-solid;
    @apply font-sans;
    font-weight: 600;
    transition-duration: 200ms;
    column-gap: 8px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-align: center;
    transition-property: transform, color, background-color, border-color;
    transition-duration: 200ms;
  }

  .button:disabled {
    pointer-events: none;
  }

  /* themes */
  .button-outline,
  .button-solid {
    --button-bg-opacity: 100%;
    --button-bg-opacity-active: 100%;
    --button-border-opacity: 100%;
    --button-border-opacity-active: 100%;
  }

  .button-outline {
    background-color: transparent;
    border-color: color-mix(
      in oklab,
      var(--button-primary) var(--button-border-opacity),
      transparent
    );
    color: var(--button-primary);
  }

  .button-solid {
    background-color: color-mix(
      in oklab,
      var(--button-primary) var(--button-bg-opacity),
      transparent
    );
    border-color: color-mix(
      in oklab,
      var(--button-primary) var(--button-border-opacity),
      transparent
    );
    color: var(--button-secondary);
  }

  @media (hover: hover) and (pointer: fine) {
    .button:active:not(:disabled) {
      transform: scale(0.98);
    }

    .button-outline:active:not(:disabled),
    .button-outline:hover:not(:disabled),
    .button-outline:focus:not(:disabled),
    .group:hover .button-outline:not(:disabled) {
      background-color: color-mix(
        in oklab,
        var(--button-primary) var(--button-bg-opacity),
        transparent
      );
      border-color: color-mix(
        in oklab,
        var(--button-primary) var(--button-border-opacity),
        transparent
      );
      color: var(--button-secondary);
    }

    .button-solid:active:not(:disabled),
    .button-solid:hover:not(:disabled),
    .button-solid:focus:not(:disabled),
    .group:hover .button-solid:not(:disabled) {
      background-color: color-mix(
        in oklab,
        var(--button-active) var(--button-bg-opacity-active),
        transparent
      );
      border-color: color-mix(
        in oklab,
        var(--button-active) var(--button-border-opacity-active),
        transparent
      );
      color: var(--button-secondary);
    }
  }

  /* colors */
  .button-black {
    --button-primary: var(--color-black);
    --button-secondary: var(--color-white);
    --button-active: var(--color-black-active);
  }

  .button-green {
    --button-primary: var(--color-green);
    --button-secondary: var(--color-white);
    --button-active: var(--color-green-active);
  }

  .button-lavender {
    --button-primary: var(--color-lavender);
    --button-secondary: var(--color-white);
    --button-active: var(--color-lavender-active);
  }

  .button-lightSand {
    --button-primary: var(--color-lightSand);
    --button-secondary: var(--color-black);
    --button-active: var(--color-lightSand-active);
  }

  .button-marygold {
    --button-primary: var(--color-marygold);
    --button-secondary: var(--color-black);
    --button-active: var(--color-marygold-active);
  }

  .button-orange {
    --button-primary: var(--color-orange);
    --button-secondary: var(--color-white);
    --button-active: var(--color-orange-active);
  }

  .button-red {
    --button-primary: var(--color-red);
    --button-secondary: var(--color-white);
    --button-active: var(--color-red-active);
  }

  .button-saffron {
    --button-primary: var(--color-saffron);
    --button-secondary: var(--color-black);
    --button-active: var(--color-saffron-active);
  }

  .button-sand {
    --button-primary: var(--color-sand);
    --button-secondary: var(--color-black);
    --button-active: var(--color-sand-active);
  }

  .button-sienna {
    --button-primary: var(--color-sienna);
    --button-secondary: var(--color-white);
    --button-active: var(--color-sienna-active);
  }

  .button-ultramarine {
    --button-primary: var(--color-ultramarine);
    --button-secondary: var(--color-white);
    --button-active: var(--color-ultramarine-active);
  }

  .button-verdigris {
    --button-primary: var(--color-verdigris);
    --button-secondary: var(--color-black);
    --button-active: var(--color-verdigris-active);
  }

  .button-wave {
    --button-primary: var(--color-wave);
    --button-secondary: var(--color-white);
    --button-active: var(--color-wave-active);
  }

  .button-white {
    --button-primary: var(--color-white);
    --button-secondary: var(--color-black);
    --button-active: var(--color-white-active);
  }

  /* disabled*/
  .button-solid:disabled {
    --button-primary: var(--color-pearl);
    --button-secondary: var(--color-grey);
  }

  .button-outline:disabled {
    --button-primary: var(--color-grey);
    --button-secondary: var(--color-grey);
  }

  /* variants & sizes */
  .button-small {
    --button-pill-px: 1.25rem;
    --button-pill-py: 0.75rem;
  }

  .button-large,
  .button-medium {
    --button-pill-px: 2rem;
    --button-pill-py: 0.75rem;
  }

  .button-small,
  .button-medium {
    --button-circle-size: var(--button-size, 3rem);
  }

  .button-large {
    --button-circle-size: var(--button-size, 6.25rem);
  }

  .button-secondary {
    --button-pill-px: 1.5rem;
    --button-pill-py: 0.5rem;
  }

  .button-tertiary {
    --button-pill-px: 0.75rem;
    --button-pill-py: 0.25rem;
  }

  .button-secondary,
  .button-tertiary {
    --button-circle-size: var(--button-size, 3rem);
  }

  .button-circle {
    @apply aspect-square;
    @apply overflow-hidden;
    @apply rounded-full;
    font-size: 1rem;
    line-height: 1.5rem;
    @apply px-0 py-0;
    @apply size-[var(--button-circle-size)];
  }

  .button-pill {
    @apply aspect-auto;
    @apply overflow-auto;
    @apply rounded-[7.5rem];
    font-size: 1rem;
    line-height: 1.5rem;
    @apply px-[var(--button-pill-px)] py-[var(--button-pill-py)];
    --button-circle-size: none;

    &.button-secondary,
    &.button-tertiary {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }
  }
}
