/*
 * Button Component
 * Primary interactive element
 */

@layer components {
  .btn {
    /* Local variables for easy overrides */
    --btn-background: var(--color-primary);
    --btn-color: var(--color-ink-inverted);
    --btn-border-color: var(--color-primary);
    --btn-border-radius: var(--radius-full);
    --btn-padding: 0.5em 1.25em;
    --btn-font-weight: var(--weight-regular);
    --btn-hover-brightness: 0.9;

    align-items: center;
    background-color: var(--btn-background);
    border-radius: var(--btn-border-radius);
    border: 1px solid var(--btn-border-color);
    color: var(--btn-color);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-small);
    font-weight: var(--btn-font-weight);
    gap: 0.5em;
    justify-content: center;
    padding: var(--btn-padding);
    text-decoration: none;
    transition: var(--duration-fast) ease-out;
    transition-property: background-color, border-color, box-shadow, filter, transform;

    @media (any-hover: hover) {
      &:hover {
        filter: brightness(var(--btn-hover-brightness));
        transform: translateY(-1px);
      }
    }

    &:focus-visible {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }

    &[disabled],
    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
      pointer-events: none;
    }
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     VARIANTS
     ═══════════════════════════════════════════════════════════════════════════ */

  .btn--secondary {
    --btn-background: transparent;
    --btn-color: var(--color-ink);
    --btn-border-color: var(--color-border);
    --btn-hover-brightness: 1;

    &:hover {
      --btn-border-color: var(--color-ink-muted);
    }
  }

  .btn--plain {
    --btn-background: transparent;
    --btn-color: var(--color-ink);
    --btn-border-color: transparent;
    --btn-padding: 0;
    --btn-hover-brightness: 1;

    &:hover {
      color: var(--color-primary);
      transform: none;
    }
  }

  .btn--negative {
    --btn-background: var(--color-negative);
    --btn-border-color: var(--color-negative);
  }

  .btn--positive {
    --btn-background: var(--color-positive);
    --btn-border-color: var(--color-positive);
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SIZES
     ═══════════════════════════════════════════════════════════════════════════ */

  .btn--sm {
    --btn-padding: 0.375em 0.875em;
    font-size: var(--text-x-small);
  }

  .btn--lg {
    --btn-padding: 0.75em 1.5em;
    font-size: var(--text-normal);
  }

  /* ═══════════════════════════════════════════════════════════════════════════
     SHAPES
     ═══════════════════════════════════════════════════════════════════════════ */

  .btn--circle {
    --btn-padding: 0;
    aspect-ratio: 1;
    block-size: 2.5em;
    display: grid;
    inline-size: 2.5em;
    place-items: center;
  }
}