@charset "UTF-8";

/* =========================================================
   M3N Buttons
   Bootstrap remains responsible for variants and mechanics.
   This component owns shared M3N button typography and density.
   ========================================================= */

.btn,
.app-btn {
    --bs-btn-font-size: var(--font-size-button);
    --bs-btn-font-weight: var(--font-weight-button);
    --bs-btn-line-height: var(--line-height-button);
    --bs-btn-padding-y: var(--button-padding-y-md);
    --bs-btn-padding-x: var(--button-padding-x-md);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-block-size: var(--button-height-md);
    font-family: var(--font-family-ui);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-button);
    line-height: var(--line-height-button);
}

.btn > i,
.btn > svg,
.app-btn > i,
.app-btn > svg {
    flex: 0 0 auto;
    font-size: var(--icon-size-button);
}

.btn-sm,
.app-btn-sm {
    --bs-btn-padding-y: var(--button-padding-y-sm);
    --bs-btn-padding-x: var(--button-padding-x-sm);
    min-block-size: var(--button-height-sm);
}

.btn-lg,
.app-btn-lg {
    --bs-btn-padding-y: var(--button-padding-y-lg);
    --bs-btn-padding-x: var(--button-padding-x-lg);
    min-block-size: var(--button-height-lg);
}