/* Alerts and flash messages
/* ------------------------------------------------------------------------- */

#flash-messages {
    background: transparent;
}
.alert {
    border-width: 0 0 var(--border-width);
    margin-block-end: 0;
}
.alert:last-of-type {
    border-block-end-width: 2px;
}

/* alerts with an icon switch to a two-column layout (icon + content) */
.alert:has(> .alert-icon) {
    display: flex;
    align-items: flex-start;
    gap: var(--ea-sp-4);
}
.alert > .alert-icon {
    flex-shrink: 0;
    margin-block-start: var(--ea-sp-1);
}
.alert > .alert-content {
    flex: 1;
    min-inline-size: 0;
}
.alert .alert-title {
    font-weight: var(--font-weight-medium);
}
.alert .alert-actions {
    display: flex;
    gap: var(--ea-sp-4);
    margin-block-start: var(--ea-sp-4);
}

.alert-dismissible .btn-close {
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 1;

    /* Bootstrap positions this button absolutely, but its rule lives in the 'vendor' layer and
       the 'ea' layer's '.btn { position: relative }' would win, leaving the button inline */
    position: absolute;
    inset-block-start: var(--ea-sp-5);
    inset-inline-end: 5px;
    padding: var(--button-padding-y-md) var(--button-padding-x-md);
}
[data-bs-theme="dark"] .btn-close {
    filter: none;
}

.alert.alert-primary {
    --bs-alert-bg: var(--alert-primary-bg);
    --bs-alert-border-color: var(--alert-primary-border-color);
    --bs-alert-color: var(--alert-primary-color);
}
.alert.alert-secondary {
    --bs-alert-bg: var(--alert-secondary-bg);
    --bs-alert-border-color: var(--alert-secondary-border-color);
    --bs-alert-color: var(--alert-secondary-color);
}
.alert.alert-success {
    --bs-alert-bg: var(--alert-success-bg);
    --bs-alert-border-color: var(--alert-success-border-color);
    --bs-alert-color: var(--alert-success-color);
}
.alert.alert-info {
    --bs-alert-bg: var(--alert-info-bg);
    --bs-alert-border-color: var(--alert-info-border-color);
    --bs-alert-color: var(--alert-info-color);
}
.alert.alert-warning {
    --bs-alert-bg: var(--alert-warning-bg);
    --bs-alert-border-color: var(--alert-warning-border-color);
    --bs-alert-color: var(--alert-warning-color);
}
.alert.alert-danger {
    --bs-alert-bg: var(--alert-danger-bg);
    --bs-alert-border-color: var(--alert-danger-border-color);
    --bs-alert-color: var(--alert-danger-color);
}
.alert.alert-light {
    --bs-alert-bg: var(--alert-light-bg);
    --bs-alert-border-color: var(--alert-light-border-color);
    --bs-alert-color: var(--alert-light-color);
}
.alert.alert-dark {
    --bs-alert-bg: var(--alert-dark-bg);
    --bs-alert-border-color: var(--alert-dark-border-color);
    --bs-alert-color: var(--alert-dark-color);
}