/* Keep button content aligned consistently across the application. */
.btn {
    --app-button-icon-gap: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-button-icon-gap);
    vertical-align: middle;
}

.btn.btn-sm {
    --app-button-icon-gap: .375rem;
}

/* Bootstrap's display utility is used by the full-width authentication buttons. */
.btn.d-grid {
    place-items: center;
}

/* Icon-only controls must stay square and should not reserve label spacing. */
.btn.btn-icon {
    gap: 0;
}

/* Livewire and similar states often wrap an icon and label in a span. */
.btn > span:not(.spinner-border) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--app-button-icon-gap);
}

/* The flex gap replaces legacy spacing utilities on button icons. */
.btn > i:is([class^="me-"], [class*=" me-"], [class^="ms-"], [class*=" ms-"]),
.btn > svg:is([class^="me-"], [class*=" me-"], [class^="ms-"], [class*=" ms-"]),
.btn > span:not(.spinner-border) > i:is([class^="me-"], [class*=" me-"], [class^="ms-"], [class*=" ms-"]),
.btn > span:not(.spinner-border) > svg:is([class^="me-"], [class*=" me-"], [class^="ms-"], [class*=" ms-"]) {
    margin-inline: 0 !important;
}

.btn > i,
.btn > svg,
.btn > .icon-base,
.btn > span:not(.spinner-border) > i,
.btn > span:not(.spinner-border) > svg,
.btn > span:not(.spinner-border) > .icon-base {
    flex: 0 0 auto;
    line-height: 1;
}