/*
 * Button Components
 * All button variants and states
 * Uses CSS nesting and variant management via custom properties
 */

@layer components {
  /* Base button with fallback values for customization */
  .btn {
    --btn-background: var(--color-white);
    --btn-color: var(--color-gray-darker);
    --btn-border-color: transparent;
    --btn-border-size: 0;
    --btn-padding-block: 0.75rem;
    --btn-padding-inline: var(--block-space);
    --btn-hover-brightness: 0.9;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--inline-space);
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    font-size: var(--text-normal);
    line-height: var(--leading-tight);
    text-align: center;
    color: var(--btn-color);
    background-color: var(--btn-background);
    border: var(--btn-border-size) solid var(--btn-border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;

    @media (any-hover: hover) {
      &:hover:not(:disabled) {
        filter: brightness(var(--btn-hover-brightness));
      }
    }

    /* Inline dark mode — brighten instead of darken */
    html[data-theme="dark"] & { --btn-hover-brightness: 1.25; }
    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & { --btn-hover-brightness: 1.25; }
    }
  }

  /* Primary button - green fill */
  .btn--primary {
    --btn-background: var(--color-green);
    --btn-color: var(--color-white);
  }

  /* Secondary button - gray-light fill, green text */
  .btn--secondary {
    --btn-background: var(--color-gray-light);
    --btn-color: var(--color-green-dark);
  }

  /* Outline button */
  .btn--outline {
    --btn-background: transparent;
    --btn-color: var(--color-gray-darker);
    --btn-border-color: var(--color-gray-darker);
    --btn-border-size: 1px;
    --btn-hover-brightness: 1;

    @media (any-hover: hover) {
      &:hover:not(:disabled) {
        --btn-background: var(--color-gray-darker);
        --btn-color: var(--color-white);
      }
    }
  }

  /* Negative/Danger button */
  .btn--negative {
    --btn-background: var(--color-red);
    --btn-color: var(--color-white);
  }

  /* Gradient button - green sweep with shadow, lift, and shine */
  .btn--gradient {
    --btn-color: var(--color-white);
    --btn-hover-brightness: 1;

    position: relative;
    overflow: hidden;
    background: var(--color-green-dark);
    box-shadow: 0 0.5em 1.5em -0.25em oklch(var(--lch-green-dark) / 30%);
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        105deg,
        transparent 0%,
        oklch(var(--lch-white) / 35%) 45%,
        oklch(var(--lch-white) / 45%) 50%,
        oklch(var(--lch-white) / 35%) 55%,
        transparent 100%
      );
      transform: translateX(-100%);
      animation: btn-shine 3s ease-in-out infinite;
      pointer-events: none;
    }

    @media (any-hover: hover) {
      &:hover:not(:disabled) {
        background: var(--color-green-darker);
        box-shadow: 0 0.75em 2em -0.25em oklch(var(--lch-green-dark) / 40%);
        transform: translateY(-0.125rem);
      }
    }
  }

  @keyframes btn-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  /* Soft button (light gray bg, no border) */
  .btn--soft {
    --btn-background: var(--color-gray-lighter);
    --btn-color: var(--color-gray-darker);
    --btn-hover-brightness: 1;

    @media (any-hover: hover) {
      &:hover:not(:disabled) {
        --btn-background: var(--color-gray-light);
      }
    }
  }

  /* Size variants - only change what's different */
  .btn--sm {
    --btn-padding-block: var(--block-space-half);
    --btn-padding-inline: 0.75rem;
    font-size: var(--text-small);
  }

  .btn--md {
    --btn-padding-block: 0.75rem;
    --btn-padding-inline: var(--block-space-double);
    font-size: var(--text-large);
  }

  .btn--lg {
    --btn-padding-block: var(--block-space);
    --btn-padding-inline: var(--block-space-double);
    font-size: var(--text-x-large);
  }

  .btn--xl {
    --btn-padding-block: var(--block-space);
    --btn-padding-inline: var(--block-space-double);
    font-size: var(--text-x-large);
  }

  /* Full width */
  .btn--block {
    display: flex;
    width: 100%;
    white-space: normal;
  }

  /* Icon button */
  .btn--icon {
    --btn-padding-block: var(--block-space-half);
    --btn-padding-inline: var(--block-space-half);
    aspect-ratio: 1;
  }

  /* Disabled state — gray out filled buttons */
  .btn:disabled {
    --btn-background: var(--color-gray-medium);
    --btn-color: var(--color-gray);
  }

  /* Disabled outline keeps its border character */
  .btn--outline:disabled {
    --btn-background: transparent;
    --btn-color: var(--color-gray);
    --btn-border-color: var(--color-gray);
  }

  /* Crossed-out old price inside button (shown when coupon applied) */
  .btn__old-price {
    font-size: 0.75em;
    opacity: 0.7;
  }

  /* Link styled as button (for form submits etc) */
  .btn-link {
    display: inline;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-gray-dark);
    font-weight: inherit;
    cursor: pointer;

    @media (any-hover: hover) {
      &:hover {
        color: var(--color-gray-dark);
      }
    }
  }
}