@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: $space-2;
    padding: $space-2 $space-4;
    border-radius: $radius-lg;
    font-size: $font-sm;
    font-weight: 500;
    transition: $transition-fast;
    white-space: nowrap;

    @include focus-ring;

    &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    &--full {
        width: 100%;
    }

    &--pill {
        border-radius: $radius-full;
    }
}

.btn--primary {
    background: var(--gradient-accent);
    color: var(--color-text-on-accent);
    box-shadow: 0 1px 2px 0 rgb(79 70 229 / 20%);

    &:hover:not(:disabled) {
        opacity: 0.9;
    }
}

// Variante sólida (no-gradiente) del acento, para acciones dentro de tarjetas
// donde el gradiente sería demasiado.
.btn--accent {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border-radius: $radius-md;
    padding: $space-2 $space-4;

    &:hover:not(:disabled) {
        background: var(--color-accent-strong);
    }
}

.btn--secondary {
    background: transparent;
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-primary);

    @include dark {
        border-color: var(--color-border);
    }

    &:hover:not(:disabled) {
        background: var(--color-surface-muted);
    }
}

// Botón oscuro/claro invertido (usado para "Salir" en la nav).
.btn--invert {
    background: #111827;
    color: #ffffff;
    border-radius: $radius-full;

    &:hover:not(:disabled) {
        background: #374151;
    }

    @include dark {
        background: #ffffff;
        color: #111827;

        &:hover:not(:disabled) {
            background: #e5e7eb;
        }
    }
}

// Botón oscuro sólido (asignar rol dentro de Usuarios).
.btn--dark {
    background: #111827;
    color: #ffffff;
    border-radius: $radius-md;

    &:hover:not(:disabled) {
        background: #374151;
    }

    @include dark {
        background: #ffffff;
        color: #111827;

        &:hover:not(:disabled) {
            background: #e5e7eb;
        }
    }
}