.alert {
    position: relative;
    padding: 12px;
    border-radius: 10px;

    & * {
        position: relative;
        z-index: 2;
    }

    &:before {
        content: '';
        position: absolute;
        inset: 0;
        opacity: 0.1;
        z-index: 1;
        border-radius: inherit; // use parent
    }

    &:after {
        content: '';
        position: absolute;
        inset: 0;
        opacity: 0.5;
        z-index: 1;
        border-width: 1px;
        border-style: solid;
        border-radius: inherit; // use parent
        background-color: transparent;
    }


    @each $bg, $color in $theme-colors {
        &.alert-#{$bg} {
            &, & * {
                color: var(--#{$bg});
            }

            &:before {
                background-color: var(--#{$bg});
            }

            &:after {
                border-color: var(--#{$bg});
            }
        }
    }

    &.alert-neutral {
        &, & * {
            color: var(--gray-500);
        }

        &:before {
            background-color: var(--gray-100);
        }

        &:after {
            border-color: var(--gray-200);
        }
    }
}

.alert-left-20 {
    position: relative;
    left: -20px;
    margin-right: -20px;

    .rtl & {
        left: auto;
        right: -20px;
        margin-right: 0;
        margin-left: -20px;
    }
}