@mixin banner-base {
    border-radius: 10px;
    padding: .875rem 1.125rem;
    margin-bottom: 1rem;
    font-weight: 500;
    vertical-align: center;
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 1px rgba(0, 0, 0, 0.08);

    & > svg {
        height: 1.25rem;
        width: 1.25rem;
        margin-right: 0.5rem;
    }
}

@mixin banner-theme($bg-color, $border-color, $fg-color, $list-fg-color) {
    background: linear-gradient(145deg, 
        color-mix(in srgb, $bg-color 100%, white 5%), 
        $bg-color);
    border: 1px solid $border-color;
    color: $fg-color;

    & > ul, p {
        color: $list-fg-color;
        & > li {
            color: $list-fg-color;
        }
    }
}

@mixin banner-warning {
    @include banner-theme(var(--warning-bg), var(--warning-border), var(--warning-fg-strong), var(--warning-fg));
}

@mixin banner-danger {
    @include banner-theme(var(--error-bg), var(--error-border), var(--error-fg-strong), var(--error-fg));
}

@mixin banner-info {
    @include banner-theme(var(--info-bg), var(--info-border), var(--info-fg-strong), var(--info-fg));
}

@mixin banner-success {
    @include banner-theme(var(--success-bg), var(--success-border), var(--success-fg-strong), var(--success-fg));
}

@mixin banner-purple {
    @include banner-theme(var(--purple-bg), var(--purple-border), var(--purple-fg-strong), var(--purple-fg));
}

@mixin alert-box($bg, $border, $fg-strong) {
    background: $bg;
    border: 1px solid $border;
    border-radius: $radius-md;
    padding: $space-3 $space-4;
    margin-bottom: $space-5;
    h3, h4 { margin: 0 0 $space-2; font-weight: 500; font-size: 1rem; color: $fg-strong; }
    ul { margin: 0; padding-left: $space-4; }
}

.banner {
    @include banner-base;
    text-align: left;

    &.warning {
        @include banner-warning;
    }

    &.danger {
        @include banner-danger;
    }

    &.info {
        @include banner-info;
    }

    &.success {
        @include banner-success;
    }

    &.purple {
        @include banner-purple;
    }
}