@layer components {
    .alert {
        position: relative;
        padding: 0.75rem 1.25rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
    }

    .alert--dismissible {
        padding-right: 4rem;
    }

    .alert--dismissible .alert__close {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        padding: 0.75rem 1.25rem;
        color: inherit;
    }

    .alert--success {
        color: #155724;
        background-color: #d4edda;
        border-color: #c3e6cb;
    }

    .alert--success hr {
        border-top-color: #b1dfbb;
    }

    .alert--info {
        color: #0c5460;
        background-color: #d1ecf1;
        border-color: #bee5eb;
    }

    .alert--info hr {
        border-top-color: #abdde5;
    }

    .alert--warning {
        color: #856404;
        background-color: #fff3cd;
        border-color: #ffeeba;
    }

    .alert--warning hr {
        border-top-color: #ffe8a1;
    }

    .alert--danger {
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }

    .alert--danger hr {
        border-top-color: #f1b0b7;
    }

    .alert__close {
        float: right;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        opacity: .5;
    }

    .alert__close:hover {
        color: #000;
        text-decoration: none;
    }

    .alert__close:not(:disabled):not(.disabled):hover,
    .alert__close:not(:disabled):not(.disabled):focus {
        opacity: .75;
    }

    button.alert__close {
        padding: 0;
        background-color: transparent;
        border: 0;
    }

    a.alert__close.disabled {
        pointer-events: none;
    }

    .alert__list {
        margin-bottom: 0;
    }
}