/* ─────────────────────────────────── */
/* COMPONENT: Buttons                  */
/* ─────────────────────────────────── */

/* ─── Text button (full-width) ─── */

.btn-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: var(--color-grey-200);
    color: var(--color-grey-500);
    border: 2px solid var(--color-grey-200);
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    /* needed for label elements — button cursor is set in reset.css */
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

label.btn-text {
    cursor: pointer !important;
}

.btn-text:hover,
.btn-text:focus {
    background-color: var(--color-grey-300);
    border-color: var(--color-grey-300);
    color: var(--color-blue-dark);
}

.btn-text:active {
    background-color: var(--color-grey-300);
    border-color: var(--color-blue-dark);
    color: var(--color-blue-dark);
}

.btn-text:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* btn-text that follows anything gets space-8 by default */
*+.btn-text {
    margin-top: var(--space-8);
}

/* Exception: tighter space when following a button, input/textarea, hint, or calendar */
button+.btn-text,
.sheet-field__input+.btn-text,
.sheet-field__helper+.btn-text,
.sheet-field__hint+.btn-text,
.calendar__month+.btn-text {
    margin-top: var(--space-2);
}

/* Pill rows and scale-selects end with button elements — restore space-8 so btn-text after them isn't downgraded */
.pill-row+.btn-text,
.scale-select+.btn-text {
    margin-top: var(--space-8);
}

/* Danger variant */
.btn-text--danger {
    color: var(--color-red-light);
}

.btn-text--danger:hover,
.btn-text--danger:focus {
    color: var(--color-red);
    background-color: var(--color-grey-300);
    border-color: var(--color-grey-300);
}

.btn-text--danger:active {
    background-color: var(--color-grey-300);
    border-color: var(--color-red);
    color: var(--color-red);
}

/* ─── Subtle modifier (smaller, lighter text — matches pill sizing) ─── */

.btn-text--subtle {
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
}

/* ─── Icon button (2.5rem square) ─── */

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-grey-200);
    background-color: var(--color-grey-200);
    color: var(--color-grey-500);
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.btn-icon:hover,
.btn-icon:focus {
    background-color: var(--color-grey-300);
    border-color: var(--color-grey-300);
    color: var(--color-blue-dark);
}

.btn-icon:active,
.btn-icon[data-active='true'] {
    background-color: var(--color-grey-300);
    border-color: var(--color-blue-dark);
    color: var(--color-blue-dark);
}

/* Danger variant */
.btn-icon--danger {
    color: var(--color-red-light);
}

.btn-icon--danger:hover,
.btn-icon--danger:focus {
    color: var(--color-red);
    background-color: var(--color-grey-300);
    border-color: var(--color-grey-300);
}

.btn-icon--danger:active,
.btn-icon--danger[data-active='true'] {
    color: var(--color-red);
    border-color: var(--color-red);
}

/* ─── Primary modifier (add-on for btn-text / btn-icon) ─── */

.btn-primary {
    background-color: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
    color: var(--color-text-inverse);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary[data-active='true'] {
    background-color: var(--color-bg);
    border-color: var(--color-blue-dark);
    color: var(--color-blue-dark);
}

/* ─── Pin modifier (active = blue-dark keep icon) ─── */

.btn-pin {
    color: var(--color-grey-500);
}

.btn-pin:hover,
.btn-pin:focus {
    background-color: var(--color-grey-300);
    border-color: var(--color-grey-300);
    color: var(--color-blue-dark);
}

.btn-pin[data-active='true'],
.btn-pin[data-active='true']:hover,
.btn-pin[data-active='true']:focus {
    background-color: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
    color: var(--color-text-inverse);
}

/* ─── Decorative modifier (non-interactive badge) ─── */

.btn-icon--decorative {
    pointer-events: none;
    cursor: default;
    background-color: var(--color-grey-200);
    border-color: var(--color-grey-200);
    color: var(--color-grey-200);
}

.btn-icon--decorative:hover,
.btn-icon--decorative:active {
    background-color: var(--color-grey-200);
    border-color: var(--color-grey-200);
    color: var(--color-grey-200);
}

.btn-icon--decorative[data-active='true'] {
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
    color: var(--color-white);
}