/* Copyright 2025-2026 Renofy Ltd. All rights reserved. */
/* === Buttons === */
.button {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.75em 1em;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
}

.button:hover {
  box-shadow: var(--shadow);
}

.button:active {
  box-shadow: none;
}

/* --- Buttons Sizes --- */
.button--xxs {
  font-size: var(--font-size-xs);
  padding: 0.6em 1em;
}

.button--xs {
  font-size: var(--font-size-xs);
}

.button--sm {
  font-size: var(--font-size-sm);
}

.button--lg {
  font-size: var(--font-size-lg);
}

@media (max-width: 820px) {
  .button {
    font-size: var(--font-size-lg);
  }

  .button--xxs {
    font-size: var(--font-size-sm);
  }

  .button--xs {
    font-size: var(--font-size-sm);
  }

  .button--sm {
    font-size: var(--font-size-base);
  }

  .button--lg {
    font-size: var(--font-size-xl);
  }
}

/* --- Solid Pink --- */
.button--pink {
  background-color: var(--color-pink);
  color: var(--color-white);
  border-color: var(--color-pink);
}

.button--pink:hover {
  background-color: var(--color-pink-dark);
}

/* --- Outline Pink --- */
.button--outline-pink {
  background-color: var(--color-white);
  color: var(--color-pink);
  border-color: var(--color-pink);
}

/* --- Solid Blue --- */
.button--blue {
  background-color: var(--color-blue);
  color: var(--color-white);
  border-color: var(--color-blue);
}

/* --- Outline Blue --- */
.button--outline-blue {
  background-color: var(--color-white);
  color: var(--color-blue);
  border-color: var(--color-blue);
}
/* --- Solid Mint --- */
.button--mint {
  background-color: var(--color-mint);
  color: var(--color-white);
  border-color: var(--color-mint);
}
/* --- Outline Mint --- */
.button--outline-mint {
  background-color: var(--color-white);
  color: var(--color-mint);
  border-color: var(--color-mint);
}
/* --- Solid Primary --- */
.button--primary {
  background-color: var(--color-text-primary);
  color: var(--color-white);
  border-color: var(--color-text-primary);
}

/* --- Outline Primary --- */
.button--outline-primary {
  background-color: var(--color-white);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

/* --- Solid Secondary --- */
.button--secondary {
  background-color: var(--color-text-secondary);
  color: var(--color-white);
  border-color: var(--color-text-secondary);
}

/* --- Outline Secondary --- */
.button--outline-secondary {
  background-color: var(--color-white);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* --- Solid Success --- */
.button--success {
  background-color: var(--color-success);
  color: var(--color-white);
  border-color: var(--color-success);
}

/* --- Outline Success --- */
.button--outline-success {
  background-color: var(--color-white);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.button--outline-success:hover {
  background-color: var(--color-success);
  color: var(--color-white);
}

/* --- Discrete --- */
.button--discrete {
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  border: none;
}

.button--discrete:hover {
  color: var(--color-pink);
}

/* --- Solid Danger --- */
.button--danger {
  background: var(--color-danger);
  color: var(--color-white);
  border-color: var(--color-danger);
}

/* --- Outline Danger --- */
.button--outline-danger {
  background-color: var(--color-white);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.button--outline-danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}

/* --- Solid Warning --- */
.button--warning {
  background: var(--color-warning);
  color: var(--color-white);
  border-color: var(--color-warning);
}

/* --- Share Button (with text label) --- */
.share-button--with-text {
  gap: 0.25rem;
}

/* --- Disabled State --- */
.button--disabled {
  cursor: not-allowed;
  opacity: 0.3;
  pointer-events: none;
}