/* Button Component */

/* Component-specific custom properties */
.c-button {
  /* Base button properties */
  --c-button-font-family: var(--ds-font-family-sans);
  --c-button-font-weight: var(--ds-font-weight-medium);
  --c-button-line-height: var(--ds-line-height-s);
  --c-button-border-width: 1px;
  --c-button-border-style: solid;
  --c-button-transition: all var(--ds-duration-fast) var(--ds-ease-out);

  /* Size-specific properties (default to medium) */
  --c-button-font-size: var(--ds-font-size-m);
  --c-button-padding-inline: var(--ds-space-m);
  --c-button-padding-block: var(--ds-space-s);
  --c-button-border-radius: var(--ds-radius-s);
  --c-button-min-height: 2.5rem; /* 40px */
  --c-button-gap: var(--ds-space-s); 

  /* Default variant colors */
  --c-button-background: var(--ds-color-button);
  --c-button-border-color: var(--ds-color-border);
  --c-button-text-color: var(--ds-color-text);
  --c-button-icon-color: var(--ds-color-icon);

  /* Hover state */
  --c-button-background-hover: var(--ds-color-button-hover);
  --c-button-border-color-hover: var(--ds-color-border-hover);
  --c-button-text-color-hover: var(--ds-color-text);
  --c-button-icon-color-hover: var(--ds-color-icon-hover);

  /* Active state */
  --c-button-background-active: var(--ds-color-active);
  --c-button-border-color-active: var(--ds-color-border-hover);
  --c-button-text-color-active: var(--ds-color-text);

  /* Disabled state */
  --c-button-background-disabled: var(--ds-color-surface-lowered);
  --c-button-border-color-disabled: var(--ds-color-border);
  --c-button-text-color-disabled: var(--ds-color-text-weakest);
  --c-button-icon-color-disabled: var(--ds-color-text-weakest);
}

/* Base button styles */
.c-button {
  /* Reset and base styles */
  appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  user-select: none;

  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--c-button-gap);
  vertical-align: middle;

  /* Typography */
  font-family: var(--c-button-font-family);
  font-size: var(--c-button-font-size);
  font-weight: var(--c-button-font-weight);
  line-height: var(--c-button-line-height);
  text-align: center;
  white-space: nowrap;

  /* Spacing and sizing */
  min-height: var(--c-button-min-height);
  padding-inline: var(--c-button-padding-inline);
  padding-block: var(--c-button-padding-block);

  /* Visual styling */
  background-color: var(--c-button-background);
  border: var(--c-button-border-width) var(--c-button-border-style) var(--c-button-border-color);
  border-radius: var(--c-button-border-radius);
  color: var(--c-button-text-color);

  /* Transitions */
  transition: var(--c-button-transition);

  /* Focus styles */
  outline: none;
}

/* Focus styles using :focus-visible for better UX */
.c-button:focus-visible {
  box-shadow: var(--ds-focus-ring);
}

/* Hover state */
.c-button:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--c-button-background-hover);
  border-color: var(--c-button-border-color-hover);
  color: var(--c-button-text-color-hover);
}

.c-button:hover:not(:disabled):not([aria-disabled="true"]) .c-button__icon {
  color: var(--c-button-icon-color-hover);
}

/* Active state */
.c-button:active:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--c-button-background-active);
  border-color: var(--c-button-border-color-active);
  color: var(--c-button-text-color-active);
  transform: translateY(1px);
}

/* Disabled state */
.c-button:disabled,
.c-button[aria-disabled="true"] {
  background-color: var(--c-button-background-disabled);
  border-color: var(--c-button-border-color-disabled);
  color: var(--c-button-text-color-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.c-button:disabled .c-button__icon,
.c-button[aria-disabled="true"] .c-button__icon {
  color: var(--c-button-icon-color-disabled);
}

/* Button elements */
.c-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  color: var(--c-button-icon-color);
  transition: color var(--ds-duration-fast) var(--ds-ease-out);
  stroke-width: var(--ds-icon-stroke-width);
}

.c-button__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke-width: var(--ds-icon-stroke-width);
}

.c-button__spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  animation: c-button-spin 1s linear infinite;
}

.c-button__spinner svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Spinner animation */
@keyframes c-button-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Content wrapper for proper spacing */
.c-button__content {
  display: inline-flex;
  align-items: center;
  gap: var(--c-button-gap);
}

/* ========================================
   BUTTON VARIANTS
   ======================================== */

/* Primary variant */
.c-button--primary {
  --c-button-background: var(--ds-color-accent);
  --c-button-border-color: var(--ds-color-accent);
  --c-button-text-color: var(--ds-color-text-on-accent);
  --c-button-icon-color: var(--ds-color-text-on-accent);

  --c-button-background-hover: color-mix(in srgb, var(--ds-color-accent) 90%, black);
  --c-button-border-color-hover: color-mix(in srgb, var(--ds-color-accent) 90%, black);
  --c-button-text-color-hover: var(--ds-color-text-on-accent);
  --c-button-icon-color-hover: var(--ds-color-text-on-accent);

  --c-button-background-active: color-mix(in srgb, var(--ds-color-accent) 80%, black);
  --c-button-border-color-active: color-mix(in srgb, var(--ds-color-accent) 80%, black);
  --c-button-text-color-active: var(--ds-color-text-on-accent);
}

/* Danger variant */
.c-button--danger {
  --c-button-background: var(--ds-color-status-danger);
  --c-button-border-color: var(--ds-color-status-danger);
  --c-button-text-color: var(--ds-color-text-on-accent);
  --c-button-icon-color: var(--ds-color-text-on-accent);

  --c-button-background-hover: color-mix(in srgb, var(--ds-color-status-danger) 90%, black);
  --c-button-border-color-hover: color-mix(in srgb, var(--ds-color-status-danger) 90%, black);
  --c-button-text-color-hover: var(--ds-color-text-on-accent);
  --c-button-icon-color-hover: var(--ds-color-text-on-accent);

  --c-button-background-active: color-mix(in srgb, var(--ds-color-status-danger) 80%, black);
  --c-button-border-color-active: color-mix(in srgb, var(--ds-color-status-danger) 80%, black);
  --c-button-text-color-active: var(--ds-color-text-on-accent);
}

/* Dashed variant */
.c-button--dashed {
  --c-button-border-style: dashed;
  --c-button-background: transparent;
  --c-button-border-color: var(--ds-color-border);
  --c-button-text-color: var(--ds-color-text);
  --c-button-icon-color: var(--ds-color-icon);

  --c-button-background-hover: var(--ds-color-surface-raised);
  --c-button-border-color-hover: var(--ds-color-border-hover);
  --c-button-text-color-hover: var(--ds-color-text);
  --c-button-icon-color-hover: var(--ds-color-icon-hover);

  --c-button-background-active: var(--ds-color-active);
  --c-button-border-color-active: var(--ds-color-border-hover);
  --c-button-text-color-active: var(--ds-color-text);
}

/* Plain variant */
.c-button--plain {
  --c-button-background: transparent;
  --c-button-border-color: transparent;
  --c-button-text-color: var(--ds-color-text-link);
  --c-button-icon-color: var(--ds-color-text-link);

  --c-button-background-hover: var(--ds-color-surface-raised);
  --c-button-border-color-hover: transparent;
  --c-button-text-color-hover: var(--ds-color-text-link);
  --c-button-icon-color-hover: var(--ds-color-text-link);

  --c-button-background-active: var(--ds-color-active);
  --c-button-border-color-active: transparent;
  --c-button-text-color-active: var(--ds-color-text-link);
}

/* Ghost variant */
.c-button--ghost {
  --c-button-background: transparent;
  --c-button-border-color: transparent;
  --c-button-text-color: var(--ds-color-text);
  --c-button-icon-color: var(--ds-color-icon);

  --c-button-background-hover: var(--ds-color-surface-raised);
  --c-button-border-color-hover: transparent;
  --c-button-text-color-hover: var(--ds-color-text);
  --c-button-icon-color-hover: var(--ds-color-icon-hover);

  --c-button-background-active: var(--ds-color-active);
  --c-button-border-color-active: transparent;
  --c-button-text-color-active: var(--ds-color-text);
}

/* ========================================
   BUTTON SIZES
   ======================================== */

/* Small size */
.c-button--size-s {
  --c-button-font-size: var(--ds-font-size-s);
  --c-button-padding-inline: var(--ds-space-s);
  --c-button-padding-block: var(--ds-space-xs);
  --c-button-min-height: 2rem; /* 32px */
  --c-button-gap: var(--ds-space-xs);
}

/* Medium size (default) */
.c-button--size-m {
  --c-button-font-size: var(--ds-font-size-m);
  --c-button-padding-inline: var(--ds-space-m);
  --c-button-padding-block: var(--ds-space-s);
  --c-button-min-height: 2.5rem; /* 40px */
  --c-button-gap: var(--ds-space-s);
}

/* Large size */
.c-button--size-l {
  --c-button-font-size: var(--ds-font-size-l);
  --c-button-padding-inline: var(--ds-space-l);
  --c-button-padding-block: var(--ds-space-s);
  --c-button-min-height: 3rem; /* 48px */
  --c-button-gap: var(--ds-space-s);
}

/* ========================================
   BUTTON MODIFIERS
   ======================================== */

/* Square/icon-only button */
.c-button--square {
  --c-button-padding-inline: var(--c-button-padding-block);
  aspect-ratio: 1;
  min-width: var(--c-button-min-height);
}

/* Icon-only button (alias for square) */
.c-button--icon-only {
  --c-button-padding-inline: var(--c-button-padding-block);
  aspect-ratio: 1;
  min-width: var(--c-button-min-height);
}

/* Block/full-width button */
.c-button--block {
  display: flex;
  width: 100%;
}

/* Loading state */
.c-button--loading {
  pointer-events: none;
  position: relative;
}

.c-button--loading .c-button__content {
  opacity: 0.6;
}

.c-button--loading .c-button__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Hide dropdown caret when used as dropdown toggle */
.c-button--no-caret .c-button__caret {
  display: none;
}

/* Dropdown caret */
.c-button__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 0.75em;
  height: 0.75em;
  margin-inline-start: var(--ds-space-xs);
  color: currentColor;
  transition: transform var(--ds-duration-fast) var(--ds-ease-out);
}

.c-button__caret svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Rotate caret when dropdown is open */
.c-button[aria-expanded="true"] .c-button__caret {
  transform: rotate(180deg);
}

/* ========================================
   LINK BUTTONS (when using <a> element)
   ======================================== */

/* Link button specific styles */
a.c-button {
  text-decoration: none;
}

/* Disabled link button */
a.c-button[aria-disabled="true"] {
  pointer-events: none;
}

/* ========================================
   ACCESSIBILITY & INTERACTION STATES
   ======================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .c-button {
    --c-button-border-width: 2px;
  }

  .c-button--plain {
    --c-button-border-color: currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .c-button {
    --c-button-transition: none;
  }

  .c-button__spinner {
    animation: none;
  }

  .c-button__caret {
    transition: none;
  }

  .c-button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: none;
  }
}

/* Print styles */
@media print {
  .c-button {
    background: transparent !important;
    color: black !important;
    border: 1px solid black !important;
    box-shadow: none !important;
  }

  .c-button__spinner {
    display: none;
  }
}

/* ========================================
   UTILITY CLASSES FOR BUTTON CONTENT
   ======================================== */

/* Screen reader only text for icon buttons */
.c-button .u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icon positioning utilities */
.c-button__icon--start {
  order: -1;
}

.c-button__icon--end {
  order: 1;
}

/* ========================================
   TEXT LINK COMPONENT
   ======================================== */

/* Base link component for text links (not button-styled) */
.c-link {
  display: inline;
  font-family: var(--ds-font-family-sans);
  font-weight: var(--ds-font-weight-normal);
  color: var(--ds-color-text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: all var(--ds-duration-fast) var(--ds-ease-out);
  cursor: pointer;
  outline: none;
}

/* Hover state */
.c-link:hover {
  color: var(--ds-color-accent);
  text-decoration-thickness: 2px;
}

/* Visited state */
.c-link:visited {
  color: var(--ds-color-text-link);
}

/* Focus state - WCAG 2.2 AAA compliant */
.c-link:focus-visible {
  outline: 2px solid var(--ds-color-accent);
  outline-offset: 2px;
  border-radius: var(--ds-radius-xs);
}

/* Active state */
.c-link:active {
  color: var(--ds-color-accent-hover);
}

/* Disabled state */
.c-link--disabled,
.c-link[aria-disabled="true"] {
  color: var(--ds-color-text-weakest);
  text-decoration: none;
  cursor: not-allowed;
  pointer-events: none;
}