/* ==============================================
   BUTTON-FC - Styles
   ============================================== */

button-fc {
  /* Structure */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pad-xs);
  padding: var(--pad-sm) var(--pad);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);

  /* Typography */
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;

  /* Theming */
  background: var(--overlay-white-10);
  color: var(--text-base);

  /* Interaction */
  cursor: pointer;
  user-select: none;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

button-fc:hover {
  background: var(--overlay-blue-10);
  border-color: var(--accent);
  color: var(--text-bright);
}

button-fc:active {
  transform: scale(0.98);
}

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

button-fc[variant="primary"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--gray-10);
}

button-fc[variant="primary"]:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

button-fc[variant="secondary"] {
  background: var(--bg-raised);
  border-color: var(--line-strong);
  color: var(--text-muted);
}

button-fc[variant="secondary"]:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  color: var(--text-base);
}

button-fc[variant="danger"] {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--gray-10);
}

button-fc[variant="danger"]:hover {
  filter: brightness(1.1);
}

button-fc[variant="ghost"] {
  background: transparent;
  border-color: transparent;
  color: var(--text-base);
}

button-fc[variant="ghost"]:hover {
  background: var(--overlay-white-10);
  border-color: transparent;
  color: var(--text-bright);
}

button-fc[variant="link"] {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
  padding: 0;
}

button-fc[variant="link"]:hover {
  text-decoration: underline;
  background: transparent;
  border-color: transparent;
}

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

button-fc[size="xs"] {
  padding: var(--pad-xs) var(--pad-sm);
  font-size: 12px;
}

button-fc[size="sm"] {
  padding: 6px 10px;
  font-size: 13px;
}

button-fc[size="md"] {
  padding: var(--pad-sm) 14px;
  font-size: 14px;
}

button-fc[size="lg"] {
  padding: 10px 18px;
  font-size: 15px;
}

/* ==============================================
   STATES
   ============================================== */

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

button-fc[loading] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

button-fc[loading]::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--text-muted);
  border-top-color: transparent;
  border-radius: 50%;
  animation: button-fc-spin 0.6s linear infinite;
}

@keyframes button-fc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==============================================
   ICON-ONLY BUTTONS
   ============================================== */

button-fc[icon] {
  padding: var(--pad-sm);
  aspect-ratio: 1;
  min-width: unset;
}

button-fc[icon][size="xs"] {
  padding: var(--pad-xs);
}

button-fc[icon][size="lg"] {
  padding: var(--pad);
}

/* ==============================================
   ACTIVE STATE (for toggle groups)
   ============================================== */

button-fc[active] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--gray-10);
}

button-fc[active]:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}