/* ========================================================================== 
   Buttons component
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 13px 22px;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  line-height: 1.55;
  white-space: nowrap;
  transition:
    color var(--transition-smooth),
    border-color var(--transition-smooth),
    background-color var(--transition-smooth),
    transform var(--transition-smooth),
    box-shadow var(--transition-smooth);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-background);
  box-shadow: 0 8px 20px -8px rgb(46 91 255 / 60%);
}

.btn--primary:not(:disabled):not([aria-disabled="true"]):hover {
  background: var(--color-primary-deep);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgb(46 91 255 / 70%);
}

.btn--ghost {
  border: var(--border-emphasis);
  background: transparent;
  color: var(--color-text);
}

.btn--ghost:not(:disabled):not([aria-disabled="true"]):hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -14px rgb(46 91 255 / 80%);
}

.btn--ghost-light {
  border-color: rgb(255 255 255 / 45%);
  background: transparent;
  color: var(--color-background);
}

.btn--ghost-light:not(:disabled):not([aria-disabled="true"]):hover {
  border-color: rgb(255 255 255 / 90%);
  background: rgb(255 255 255 / 16%);
  color: var(--color-background);
  opacity: 1;
  box-shadow: 0 10px 24px -16px rgb(0 0 0 / 65%);
}

.btn--light {
  background: var(--color-background);
  color: var(--color-primary);
}

.btn--light:not(:disabled):not([aria-disabled="true"]):hover {
  opacity: 1;
  transform: translateY(-2px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}