@use "../../01-core/prefix" as *;
@use "./alert.mixins" as alert;
@use "../../01-core/external" as *;

@layer ss.components {
    .#{$ss-prefix-module}-alert {
        @include alert.ss-alert;
        @include alert.ss-alert-variant(info);
    }

    .#{$ss-prefix-module}-alert--info {
        @include alert.ss-alert;
        @include alert.ss-alert-variant(info);
    }
    .#{$ss-prefix-module}-alert--success {
        @include alert.ss-alert;
        @include alert.ss-alert-variant(success);
    }
    .#{$ss-prefix-module}-alert--warning {
        @include alert.ss-alert;
        @include alert.ss-alert-variant(warning);
    }
    .#{$ss-prefix-module}-alert--danger,
    .#{$ss-prefix-module}-alert--error {
        @include alert.ss-alert;
        @include alert.ss-alert-variant(danger);
    }

    .#{$ss-prefix-module}-alert__title {
        font-weight: 600;
        margin-block-end: q(4);
    }

    .#{$ss-prefix-module}-alert__body {
        margin: 0;
    }

    .#{$ss-prefix-module}-alert__close {
        margin-inline-start: auto;
        background: transparent;
        border: 0;
        cursor: pointer;
        color: inherit;
    }
}