/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 *
 * Cosmos theme for Button.
 *
 * Authoring shape: each variant declares its color / sizing / spacing
 * hooks flat at the variant root. Per-state color hooks (`-hover`,
 * `-focus`, `-active`, `-disabled`) are read by `themes/base.css`
 * only inside the matching pseudo-state, so flat assignment paints
 * identically to nested but emits fewer rules.
 *
 * Hover/active shadow + transform are direct paint (Path 3 doctrine).
 * `--slds-c-button-shadow-hover`, `-transform-hover`, and `-shadow-active`
 * are NOT exposed as customer-tunable hooks: lightning-blue and slack
 * paint no decorative motion, so a per-component hook would force them
 * into partial coverage. Each variant's `&:hover` and `&:active`
 * blocks paint `box-shadow` + `transform` directly against the shared
 * `--slds-s-button-{bordered,brand}-{shadow,transform}-hover` and
 * `--slds-s-button-shadow-active` tokens (or per-feedback literals
 * for destructive/text-destructive/success/inverse). Customers retune
 * via the upstream shared tokens, not per-component hooks.
 *
 * `--slds-c-button-shadow-focus` is the only shadow hook kept on
 * button: focus is a real recipe-level customer surface (buttonGroup,
 * tabs, buttonIcon retune it). The idle `--slds-c-button-shadow` was
 * dropped: no theme wrote it at rest and no shared `--slds-s-button-shadow`
 * exists to back it, so it was a write-only customer surface with no
 * paint behind it.
 *
 * Nested pseudo-state blocks are kept only for:
 *   - Per-variant scoped paint (`&:hover { transform; box-shadow }`,
 *     `&:active { transform: none; box-shadow }`).
 *   - Inverse's state-combination selector (`&:not(:hover):focus-visible`).
 *   - The transition declaration scoped to `&:not([disabled])`.
 */

@layer theme {
  /**
   * Base button — defaults for unclassed .slds-button (text/link style).
   */
  .slds-button {
    /* radius / sizing / font / spacing / icon */
    --slds-c-button-radius-border: var(--slds-s-button-radius-border);
    --slds-c-button-sizing-border: var(--slds-g-sizing-border-1);
    --slds-c-button-font-weight: var(--slds-g-font-weight-6);
    --slds-c-button-font-line-height: 1.875rem;
    --slds-c-button-spacing-gap: var(--slds-g-spacing-2);

    /* Icon - Direct size on primitive to allow button-icon-* hook to override  */
    --slds-c-icon-size: 0.875rem;

    /* color (idle + per-state) */
    --slds-c-button-color-foreground: var(--slds-g-color-accent-2);
    --slds-c-button-color-foreground-hover: var(--slds-g-color-accent-3);
    --slds-c-button-color-foreground-active: var(--slds-g-color-accent-3);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-disabled-1);
    --slds-c-button-shadow-focus: var(--slds-g-shadow-outline-focus-1);

    &:not([disabled]) {
      transition:
        transform 150ms ease-in-out,
        box-shadow 150ms ease-in-out;
    }

    &:focus-visible {
      box-shadow: var(--slds-c-button-shadow-focus);
      outline: 0;
      background-clip: padding-box;
    }

    &.slds-button_reset:focus-visible {
      --slds-c-button-shadow-focus: var(--slds-g-shadow-outset-focus-1);

      box-shadow: var(--slds-c-button-shadow-focus);
    }
  }

  /* Neutral — gray border, white background. */
  .slds-button_neutral {
    --slds-c-button-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-button-color-border: var(--slds-g-color-border-2);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-hover: var(--slds-g-color-border-2);

    --slds-c-button-color-background-focus: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-focus: var(--slds-g-color-border-2);
    --slds-c-button-shadow-focus: var(--slds-g-shadow-inset-inverse-focus-1);

    --slds-c-button-color-background-active: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-active: var(--slds-g-color-border-2);

    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
    --slds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-on-disabled-1);

    &:hover {
      transform: var(--slds-s-button-bordered-transform-hover);
      box-shadow: var(--slds-s-button-bordered-shadow-hover);
    }

    /* Active drops the hover translate so the press-down reads
         cleanly while keeping the active shadow. */
    &:active {
      transform: none;
      box-shadow: var(--slds-s-button-shadow-active);
    }
  }

  /* Brand — primary CTA on accent surface. */
  .slds-button_brand {
    --slds-c-button-color-background: var(--slds-g-color-accent-container-1);
    --slds-c-button-color-border: var(--slds-g-color-border-accent-1);
    --slds-c-button-color-foreground: var(--slds-g-color-on-accent-1);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-background-hover: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-border-hover: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-foreground-hover: var(--slds-g-color-on-accent-2);

    --slds-c-button-color-background-focus: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-border-focus: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-foreground-focus: var(--slds-g-color-on-accent-2);
    --slds-c-button-shadow-focus: var(--slds-g-shadow-inset-inverse-focus-1);

    --slds-c-button-color-background-active: var(--slds-g-color-accent-container-2);
    --slds-c-button-color-border-active: transparent;
    --slds-c-button-color-foreground-active: var(--slds-g-color-on-accent-2);

    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-border-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-on-disabled-2);

    &:hover {
      transform: var(--slds-s-button-brand-transform-hover);
      box-shadow: var(--slds-s-button-brand-shadow-hover);
    }

    &:active {
      transform: none;
      box-shadow: var(--slds-s-button-shadow-active);
    }
  }

  /* Outline-brand — accent border on neutral surface. */
  .slds-button_outline-brand {
    --slds-c-button-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-button-color-border: var(--slds-g-color-border-accent-1);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-hover: var(--slds-g-color-border-accent-1);

    --slds-c-button-color-background-focus: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-focus: var(--slds-g-color-border-accent-1);
    --slds-c-button-shadow-focus: var(--slds-g-shadow-inset-inverse-focus-1);

    --slds-c-button-color-background-active: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-active: var(--slds-g-color-border-accent-1);

    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
    --slds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);

    &:hover {
      transform: var(--slds-s-button-bordered-transform-hover);
      box-shadow: var(--slds-s-button-brand-shadow-hover);
    }

    &:active {
      transform: none;
      box-shadow: var(--slds-s-button-shadow-active);
    }
  }

  /* Destructive — red CTA. */
  .slds-button_destructive {
    --slds-c-button-color-foreground: #fff;
    --slds-c-button-color-background: var(--slds-g-color-error-base-50);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-foreground-hover: light-dark(#fff, var(--slds-g-color-error-base-40));
    --slds-c-button-color-background-hover: light-dark(
      var(--slds-g-color-error-base-40),
      var(--slds-g-color-error-base-90)
    );
    --slds-c-button-color-border-hover: light-dark(
      var(--slds-g-color-error-base-40),
      var(--slds-g-color-error-base-90)
    );

    --slds-c-button-color-foreground-focus: light-dark(#fff, var(--slds-g-color-error-base-40));
    --slds-c-button-color-background-focus: light-dark(
      var(--slds-g-color-error-base-40),
      var(--slds-g-color-error-base-90)
    );
    --slds-c-button-color-border-focus: light-dark(
      var(--slds-g-color-error-base-40),
      var(--slds-g-color-error-base-90)
    );
    --slds-c-button-shadow-focus: var(--slds-g-shadow-inset-inverse-focus-1);

    --slds-c-button-color-foreground-active: light-dark(#fff, var(--slds-g-color-error-base-40));
    --slds-c-button-color-background-active: light-dark(
      var(--slds-g-color-error-base-40),
      var(--slds-g-color-error-base-90)
    );
    --slds-c-button-color-border-active: light-dark(
      var(--slds-g-color-error-base-40),
      var(--slds-g-color-error-base-90)
    );

    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-border-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-on-disabled-2);

    &:hover {
      transform: var(--slds-s-button-brand-transform-hover);
      box-shadow: 0 2px 0 0 light-dark(var(--slds-g-color-error-base-20), var(--slds-g-color-error-base-40));
    }

    &:active {
      transform: none;
      box-shadow: var(--slds-s-button-shadow-active);
    }
  }

  /* Text-destructive — red text on neutral surface. */
  .slds-button_text-destructive {
    --slds-c-button-color-foreground: var(--slds-g-color-error-1);
    --slds-c-button-color-background: var(--slds-g-color-surface-container-1);
    --slds-c-button-color-border: var(--slds-g-color-border-error-1);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-hover: var(--slds-g-color-border-error-2);
    --slds-c-button-color-foreground-hover: var(--slds-g-color-error-1);

    --slds-c-button-color-background-focus: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-focus: var(--slds-g-color-border-error-2);
    --slds-c-button-color-foreground-focus: var(--slds-g-color-error-1);
    --slds-c-button-shadow-focus: var(--slds-g-shadow-inset-inverse-focus-1);

    --slds-c-button-color-background-active: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-active: var(--slds-g-color-border-error-2);
    --slds-c-button-color-foreground-active: var(--slds-g-color-error-1);

    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
    --slds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-on-disabled-1);

    &:hover {
      transform: var(--slds-s-button-bordered-transform-hover);
      box-shadow: 0 2px 0 0 light-dark(var(--slds-g-color-error-base-20), var(--slds-g-color-error-base-40));
    }

    &:active {
      transform: none;
      box-shadow: var(--slds-s-button-shadow-active);
    }
  }

  /* Success — green CTA. */
  .slds-button_success {
    --slds-c-button-color-foreground: #fff;
    --slds-c-button-color-background: var(--slds-g-color-success-base-50);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-foreground-hover: light-dark(#fff, var(--slds-g-color-success-base-40));
    --slds-c-button-color-background-hover: light-dark(
      var(--slds-g-color-success-base-40),
      var(--slds-g-color-success-base-90)
    );
    --slds-c-button-color-border-hover: light-dark(
      var(--slds-g-color-success-base-40),
      var(--slds-g-color-success-base-90)
    );

    --slds-c-button-color-foreground-focus: light-dark(#fff, var(--slds-g-color-success-base-40));
    --slds-c-button-color-background-focus: light-dark(
      var(--slds-g-color-success-base-40),
      var(--slds-g-color-success-base-90)
    );
    --slds-c-button-color-border-focus: light-dark(
      var(--slds-g-color-success-base-40),
      var(--slds-g-color-success-base-90)
    );
    --slds-c-button-shadow-focus: var(--slds-g-shadow-inset-inverse-focus-1);

    --slds-c-button-color-foreground-active: light-dark(#fff, var(--slds-g-color-success-base-40));
    --slds-c-button-color-background-active: light-dark(
      var(--slds-g-color-success-base-40),
      var(--slds-g-color-success-base-90)
    );
    --slds-c-button-color-border-active: light-dark(
      var(--slds-g-color-success-base-40),
      var(--slds-g-color-success-base-90)
    );

    --slds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-border-disabled: var(--slds-g-color-disabled-container-2);
    --slds-c-button-color-foreground-disabled: var(--slds-g-color-on-disabled-2);

    &:hover {
      transform: var(--slds-s-button-brand-transform-hover);
      box-shadow: 0 2px 0 0
        light-dark(var(--slds-g-color-success-base-20), var(--slds-g-color-success-base-40));
    }

    &:active {
      transform: none;
      box-shadow: var(--slds-s-button-shadow-active);
    }
  }
  /* Full-width — placed after every variant so the cascade-order tie
     on `.slds-button.slds-button_full-width.slds-button_<variant>:hover`
     (all spec 0,3,0) resolves in full-width's favor and the resting
     layout is preserved without lift or shadow. */
  .slds-button_full-width {
    &:hover {
      box-shadow: none;
      transform: none;
    }

    &:focus-visible {
      --slds-c-button-shadow-focus: var(--slds-g-shadow-outset-focus-1);

      box-shadow: var(--slds-c-button-shadow-focus);
    }
  }

  /* Inverse — for dark surfaces. */
  .slds-button_inverse {
    --slds-c-button-color-background: transparent;
    --slds-c-button-color-border: var(--slds-g-color-border-inverse-1);
    --slds-c-button-color-foreground: var(--slds-g-color-on-surface-inverse-1);
    --slds-c-button-spacing-inline: var(--slds-s-button-spacing-inline);

    --slds-c-button-color-background-hover: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-hover: var(--slds-g-color-border-inverse-1);
    --slds-c-button-color-foreground-hover: var(--slds-g-color-accent-3);

    --slds-c-button-color-border-focus: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-foreground-focus: var(--slds-g-color-on-surface-3);
    --slds-c-button-shadow-focus: var(--slds-g-shadow-inset-inverse-focus-1);

    --slds-c-button-color-background-active: var(--slds-g-color-surface-container-2);
    --slds-c-button-color-border-active: transparent;
    --slds-c-button-color-foreground-active: var(--slds-g-color-accent-3);

    --slds-c-button-color-border-disabled: color-mix(
      in oklab,
      var(--slds-g-color-neutral-base-100),
      transparent 50%
    );
    --slds-c-button-color-foreground-disabled: color-mix(
      in oklab,
      var(--slds-g-color-neutral-base-100),
      transparent 50%
    );

    &:hover {
      transform: var(--slds-s-button-brand-transform-hover);
      box-shadow: 0 2px 0 0
        light-dark(var(--slds-g-color-neutral-base-20), var(--slds-g-color-neutral-base-40));
    }

    /* State-combination override: focus-visible WITHOUT hover. */
    &:not(:hover):focus-visible {
      --slds-c-button-shadow-focus: 0px 0px 0px 2px var(--slds-g-color-neutral-base-95) inset;
      --slds-c-button-color-foreground-focus: var(--slds-g-color-on-surface-inverse-1);
    }

    &:active {
      transform: none;
      box-shadow: var(--slds-s-button-shadow-active);
    }
  }

  /* Per-element icon-size modifiers. Mirrors the legacy button.css contract. */
  .slds-button .slds-button__icon_large {
    --slds-c-button-icon-size: var(--slds-g-sizing-7);
  }

  .slds-button .slds-button__icon_small {
    --slds-c-button-icon-size: var(--slds-g-sizing-4);
  }

  .slds-button .slds-button__icon_x-small {
    --slds-c-button-icon-size: var(--slds-g-sizing-3);
  }
}