/* Button — atom. Spec: component-specs/button.md */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition:
        background-color 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.button:active {
    transform: scale(0.97);
}

/* Sizes */
.button-small {
    height: 32px;
    padding-inline: 12px;
    gap: 8px;
    font-size: var(--text-mini-size);
}

.button-medium {
    height: 40px;
    padding-inline: 14px;
    gap: 8px;
    font-size: var(--text-mini-size);
}

.button-large {
    height: 44px;
    padding-inline: 20px;
    gap: 6px;
    font-size: 16px;
}

/* Variants */
.button-primary {
    background: var(--action-primary-bg);
    color: var(--surface-canvas);
}

@media (any-hover: hover) {
    .button-primary:hover {
        background: var(--action-primary-bg-hover);
    }
}

.button-primary:active {
    background: var(--action-primary-bg-hover);
}

.button-secondary {
    background: var(--action-secondary-bg);
    border: var(--border-hairline) solid var(--action-secondary-border);
    box-shadow: var(--shadow-xs);
    color: var(--text-primary);
}

@media (any-hover: hover) {
    .button-secondary:hover {
        background: var(--action-secondary-bg-hover);
    }
}

.button-secondary:active {
    background: var(--action-secondary-bg-hover);
}

.button-ghost {
    background: transparent;
    color: var(--text-tertiary);
}

@media (any-hover: hover) {
    .button-ghost:hover {
        color: var(--text-primary);
        background: #30302e;
    }
}

.button-ghost:active {
    background: #33332f;
}

[data-theme='light'] .button-ghost:hover {
    background: #e0e0d9;
}

[data-theme='light'] .button-ghost:active {
    background: #dadad2;
}