/**
 * Button Component Styles
 *
 * Consumes design system tokens from:
 * - Pattern layer: --pattern-button-* (base structure)
 * - Component layer: --component-button-* (variants & sizes)
 * - Semantic layer: --semantic-typography-label-* (text styles)
 */

/* ==========================================================================
   Base Button
   ========================================================================== */

.ds-button {
  /* Layout from pattern */
  display: var(--pattern-button-properties-display);
  align-items: var(--pattern-button-properties-align-items);
  justify-content: var(--pattern-button-properties-justify-content);
  gap: var(--pattern-button-base-tokens-gap);

  /* Sizing defaults (md) */
  padding: var(--pattern-button-base-tokens-padding-y) var(--pattern-button-base-tokens-padding-x);
  min-height: var(--pattern-button-base-tokens-min-height);
  min-width: var(--pattern-button-properties-min-width);
  max-width: var(--pattern-button-properties-max-width);

  /* Border */
  border-width: var(--pattern-button-base-tokens-border-width);
  border-style: var(--pattern-button-properties-border-style);
  border-radius: var(--pattern-button-base-tokens-border-radius);

  /* Typography (md default - from pattern base-tokens) */
  font-family: var(--pattern-button-base-tokens-font-family);
  font-size: var(--pattern-button-base-tokens-font-size);
  font-weight: var(--pattern-button-base-tokens-font-weight);
  line-height: var(--pattern-button-base-tokens-line-height);
  letter-spacing: var(--pattern-button-base-tokens-letter-spacing);
  text-transform: var(--pattern-button-base-tokens-text-transform);

  /* Behavior */
  cursor: var(--pattern-button-properties-cursor);
  user-select: var(--pattern-button-properties-user-select);
  white-space: var(--pattern-button-properties-white-space);
  overflow: var(--pattern-button-properties-overflow);
  text-overflow: var(--pattern-button-properties-text-overflow);

  /* Transition */
  transition:
    background-color var(--semantic-transition-color),
    border-color var(--semantic-transition-color),
    color var(--semantic-transition-color),
    box-shadow var(--semantic-transition-fast);

  /* Reset browser defaults */
  outline: none;
  text-decoration: none;
  box-sizing: border-box;
}

/* Focus visible ring */
.ds-button:focus-visible {
  outline: var(--semantic-focus-ringwidth) solid var(--semantic-focus-ringcolor);
  outline-offset: var(--semantic-focus-outlineoffset);
}

/* Instant transition for programmatic active state (prevents flicker) */
.ds-button.ds-button--active {
  transition: none !important;
  cursor: default;
}

/* Toggle buttons keep pointer cursor when active */
.ds-button.ds-button--toggle.ds-button--active {
  cursor: pointer;
}

/* ==========================================================================
   Variants
   ========================================================================== */

/* Primary */
.ds-button--primary {
  background-color: color-mix(in srgb, var(--component-button-primary-background) calc(var(--component-button-primary-background-opacity) * 100%), transparent);
  color: var(--component-button-primary-text-color);
  border-color: var(--component-button-primary-border-color);
}

.ds-button--primary:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--component-button-primary-background-hover) calc(var(--component-button-primary-background-hover-opacity) * 100%), transparent);
  color: var(--component-button-primary-text-color-hover);
  border-color: var(--component-button-primary-border-color-hover);
}

.ds-button--primary:active:not(:disabled),
.ds-button--primary.ds-button--active:not(:disabled) {
  background-color: color-mix(in srgb, var(--component-button-primary-background-active) calc(var(--component-button-primary-background-active-opacity) * 100%), transparent);
  color: var(--component-button-primary-text-color-active);
  border-color: var(--component-button-primary-border-color-active);
}

.ds-button--primary:disabled,
.ds-button--primary.ds-button--disabled {
  background-color: color-mix(in srgb, var(--component-button-primary-background-disabled) calc(var(--component-button-primary-background-disabled-opacity) * 100%), transparent);
  color: var(--component-button-primary-text-color-disabled);
  border-color: var(--component-button-primary-border-color-disabled);
  cursor: not-allowed;
}

/* Secondary */
.ds-button--secondary {
  background-color: color-mix(in srgb, var(--component-button-secondary-background) calc(var(--component-button-secondary-background-opacity) * 100%), transparent);
  color: var(--component-button-secondary-text-color);
  border-color: var(--component-button-secondary-border-color);
}

.ds-button--secondary:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--component-button-secondary-background-hover) calc(var(--component-button-secondary-background-hover-opacity) * 100%), transparent);
  color: var(--component-button-secondary-text-color-hover);
  border-color: var(--component-button-secondary-border-color-hover);
}

.ds-button--secondary:active:not(:disabled),
.ds-button--secondary.ds-button--active:not(:disabled) {
  background-color: color-mix(in srgb, var(--component-button-secondary-background-active) calc(var(--component-button-secondary-background-active-opacity) * 100%), transparent);
  color: var(--component-button-secondary-text-color-active);
  border-color: var(--component-button-secondary-border-color-active);
}

.ds-button--secondary:disabled,
.ds-button--secondary.ds-button--disabled {
  background-color: color-mix(in srgb, var(--component-button-secondary-background-disabled) calc(var(--component-button-secondary-background-disabled-opacity) * 100%), transparent);
  color: var(--component-button-secondary-text-color-disabled);
  border-color: var(--component-button-secondary-border-color-disabled);
  cursor: not-allowed;
}

/* Ghost */
.ds-button--ghost {
  background-color: color-mix(in srgb, var(--component-button-ghost-background) calc(var(--component-button-ghost-background-opacity) * 100%), transparent);
  color: var(--component-button-ghost-text-color);
  border-color: var(--component-button-ghost-border-color);
}

.ds-button--ghost:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--component-button-ghost-background-hover) calc(var(--component-button-ghost-background-hover-opacity) * 100%), transparent);
  color: var(--component-button-ghost-text-color-hover);
  border-color: var(--component-button-ghost-border-color-hover);
}

.ds-button--ghost:active:not(:disabled),
.ds-button--ghost.ds-button--active:not(:disabled) {
  background-color: color-mix(in srgb, var(--component-button-ghost-background-active) calc(var(--component-button-ghost-background-active-opacity) * 100%), transparent);
  color: var(--component-button-ghost-text-color-active);
  border-color: var(--component-button-ghost-border-color-active);
}

.ds-button--ghost:disabled,
.ds-button--ghost.ds-button--disabled {
  background-color: color-mix(in srgb, var(--component-button-ghost-background-disabled) calc(var(--component-button-ghost-background-disabled-opacity) * 100%), transparent);
  color: var(--component-button-ghost-text-color-disabled);
  border-color: var(--component-button-ghost-border-color-disabled);
  cursor: not-allowed;
}

/* Destructive */
.ds-button--destructive {
  background-color: color-mix(in srgb, var(--component-button-destructive-background) calc(var(--component-button-destructive-background-opacity) * 100%), transparent);
  color: var(--component-button-destructive-text-color);
  border-color: var(--component-button-destructive-border-color);
}

.ds-button--destructive:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--component-button-destructive-background-hover) calc(var(--component-button-destructive-background-hover-opacity) * 100%), transparent);
  color: var(--component-button-destructive-text-color-hover);
  border-color: var(--component-button-destructive-border-color-hover);
}

.ds-button--destructive:active:not(:disabled),
.ds-button--destructive.ds-button--active:not(:disabled) {
  background-color: color-mix(in srgb, var(--component-button-destructive-background-active) calc(var(--component-button-destructive-background-active-opacity) * 100%), transparent);
  color: var(--component-button-destructive-text-color-active);
  border-color: var(--component-button-destructive-border-color-active);
}

.ds-button--destructive:disabled,
.ds-button--destructive.ds-button--disabled {
  background-color: color-mix(in srgb, var(--component-button-destructive-background-disabled) calc(var(--component-button-destructive-background-disabled-opacity) * 100%), transparent);
  color: var(--component-button-destructive-text-color-disabled);
  border-color: var(--component-button-destructive-border-color-disabled);
  cursor: not-allowed;
}

/* ==========================================================================
   Sizes
   ========================================================================== */

/* Small */
.ds-button--sm {
  padding: var(--component-button-sm-padding-y) var(--component-button-sm-padding-x);
  min-height: var(--component-button-sm-min-height);
  min-width: var(--component-button-sm-min-width);
  max-width: var(--component-button-sm-max-width);
  border-radius: var(--component-button-sm-border-radius);
  gap: var(--component-button-sm-gap);

  /* Typography: from component size tokens */
  font-family: var(--component-button-sm-font-family);
  font-size: var(--component-button-sm-font-size);
  font-weight: var(--component-button-sm-font-weight);
  line-height: var(--component-button-sm-line-height);
  letter-spacing: var(--component-button-sm-letter-spacing);
  text-transform: var(--component-button-sm-text-transform);
}

/* Medium (default - uses base pattern tokens) */
.ds-button--md {
  min-height: var(--component-button-md-min-height);
  min-width: var(--component-button-md-min-width);
  max-width: var(--component-button-md-max-width);
}

/* Large */
.ds-button--lg {
  padding: var(--component-button-lg-padding-y) var(--component-button-lg-padding-x);
  min-height: var(--component-button-lg-min-height);
  min-width: var(--component-button-lg-min-width);
  max-width: var(--component-button-lg-max-width);
  border-radius: var(--component-button-lg-border-radius);
  gap: var(--component-button-lg-gap);

  /* Typography: from component size tokens */
  font-family: var(--component-button-lg-font-family);
  font-size: var(--component-button-lg-font-size);
  font-weight: var(--component-button-lg-font-weight);
  line-height: var(--component-button-lg-line-height);
  letter-spacing: var(--component-button-lg-letter-spacing);
  text-transform: var(--component-button-lg-text-transform);
}

/* ==========================================================================
   Layout Modes
   ========================================================================== */

/* Label only (default) - no special rules needed */
.ds-button--label-only {
  /* Default layout */
}

/* Icon only - square button */
.ds-button--icon-only {
  justify-content: center;
  min-width: auto;
  max-width: none;
  aspect-ratio: 1;
  padding: var(--pattern-button-base-tokens-padding-y);
}

.ds-button--icon-only.ds-button--sm {
  padding: var(--component-button-sm-padding-y);
}

.ds-button--icon-only.ds-button--lg {
  padding: var(--component-button-lg-padding-y);
}

/* Icon left / Icon right */
.ds-button--icon-left,
.ds-button--icon-right {
  /* Gap between icon and label handled by base gap */
}

/* ==========================================================================
   Icon Styling
   ========================================================================== */

.ds-button__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  /* Icon sizing from pattern */
  width: var(--pattern-button-base-tokens-icon-size);
  height: var(--pattern-button-base-tokens-icon-size);
}

.ds-button__icon svg {
  width: 100%;
  height: 100%;
  stroke-width: var(--pattern-button-base-tokens-icon-stroke);
}

/* Size-specific icon sizing */
.ds-button--sm .ds-button__icon {
  width: var(--component-button-sm-icon-size);
  height: var(--component-button-sm-icon-size);
}

.ds-button--sm .ds-button__icon svg {
  stroke-width: var(--component-button-sm-icon-stroke);
}

.ds-button--lg .ds-button__icon {
  width: var(--component-button-lg-icon-size);
  height: var(--component-button-lg-icon-size);
}

.ds-button--lg .ds-button__icon svg {
  stroke-width: var(--component-button-lg-icon-stroke);
}

/* ==========================================================================
   Label Styling
   ========================================================================== */

.ds-button__label {
  /* Inherit text styles from button */
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}