.alert-warning {
    --app-alert-ink: #8a570a;
    --app-alert-background: linear-gradient(115deg, #fff0c9 0%, #fff8e9 65%, #fff4dc 100%);
    --app-alert-border: #f2cc7a;
    --app-alert-icon: url('../images/warning.svg');
}

.alert-danger {
    --app-alert-ink: #9c2b37;
    --app-alert-background: linear-gradient(115deg, #ffe5e8 0%, #fff7f8 65%, #fff0f2 100%);
    --app-alert-border: #f2b4bc;
    --app-alert-icon: url('../images/alert-danger.svg');
}

.alert-success {
    --app-alert-ink: #176b45;
    --app-alert-background: linear-gradient(115deg, #dff5e8 0%, #f5fcf8 65%, #eaf8f0 100%);
    --app-alert-border: #a7dbbd;
    --app-alert-icon: url('../images/alert-success.svg');
}

.alert-info,
.alert-primary {
    --app-alert-ink: #245aa8;
    --app-alert-background: linear-gradient(115deg, #e2edff 0%, #f6f9ff 65%, #edf4ff 100%);
    --app-alert-border: #b2cdf4;
    --app-alert-icon: url('../images/alert-info.svg');
}

.alert:is(.alert-warning, .alert-danger, .alert-success, .alert-info, .alert-primary) {
    --bs-alert-link-color: var(--app-alert-ink);
    position: relative;
    padding-left: 52px;
    color: var(--app-alert-ink);
    background: var(--app-alert-background);
    border: 1px solid var(--app-alert-border);
    border-radius: 10px;
    overflow-wrap: anywhere;
}

.alert:is(.alert-warning, .alert-danger, .alert-success, .alert-info, .alert-primary)::before {
    content: '';
    position: absolute;
    top: calc(var(--bs-alert-padding-y, 1rem) - 4px);
    left: 12px;
    width: 32px;
    height: 32px;
    background: var(--app-alert-icon) center / contain no-repeat;
    pointer-events: none;
}

.alert:is(.alert-warning, .alert-danger, .alert-success, .alert-info, .alert-primary) .btn-close {
    opacity: .4;
}

.alert:is(.alert-warning, .alert-danger, .alert-success, .alert-info, .alert-primary) .btn-close:is(:hover, :focus-visible) {
    opacity: .75;
}

.alert:is(.alert-warning, .alert-danger, .alert-success, .alert-info, .alert-primary).is-dismissing {
    overflow: hidden;
    pointer-events: none;
}
