/*
|--------------------------------------------------------------------------
| Flash Messages
|--------------------------------------------------------------------------
*/

.tbs-flash-wrapper {

    display: flex;
    flex-direction: column;

    gap: 1rem;

    margin-bottom: 1.5rem;

}

.tbs-alert {

    border: 0;

    border-radius: 18px;

    padding:
            1rem
            1.25rem;

    box-shadow:
            0 8px 24px rgba(12,18,72,.06);

}

.tbs-alert-content {

    display: flex;
    align-items: center;
    gap: 1rem;

    padding-right: 2rem;

}

.tbs-alert-icon {

    width: 42px;
    height: 42px;

    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    font-size: 1rem;

}

/*
|--------------------------------------------------------------------------
| Success
|--------------------------------------------------------------------------
*/

.alert-success {

    background:
            rgba(46,125,50,.08);

    color:
            #2E7D32;

}

.alert-success .tbs-alert-icon {

    background:
            rgba(46,125,50,.14);

    color:
            #2E7D32;

}

/*
|--------------------------------------------------------------------------
| Danger
|--------------------------------------------------------------------------
*/

.alert-danger {

    background:
            rgba(208,55,55,.08);

    color:
            var(--tbs-red);

}

.alert-danger .tbs-alert-icon {

    background:
            rgba(208,55,55,.14);

    color:
            var(--tbs-red);

}

/*
|--------------------------------------------------------------------------
| Warning
|--------------------------------------------------------------------------
*/

.alert-warning {

    background:
            rgba(227,122,26,.12);

    color:
            #9A5B00;

}

.alert-warning .tbs-alert-icon {

    background:
            rgba(227,122,26,.18);

    color:
            var(--tbs-orange);

}

/*
|--------------------------------------------------------------------------
| Info
|--------------------------------------------------------------------------
*/

.alert-info {

    background:
            rgba(12,18,72,.06);

    color:
            var(--tbs-blue);

}

.alert-info .tbs-alert-icon {

    background:
            rgba(12,18,72,.08);

    color:
            var(--tbs-blue);

}

/*
|--------------------------------------------------------------------------
| Alert Message
|--------------------------------------------------------------------------
*/

.tbs-alert-message {

    font-weight: 500;

    line-height: 1.5;

}

.tbs-alert .btn-close {

    position: absolute;

    top: 0;
    right: 1rem;

    opacity: .5;

}

.tbs-alert .btn-close:hover {
    opacity: 1;
}

@media (max-width: 576px) {

    .tbs-alert {

        padding:
                .9rem
                1rem;

    }

    .tbs-alert-content {

        gap: .75rem;

        padding-right: 1.5rem;

    }

    .tbs-alert-icon {

        width: 36px;
        height: 36px;

        border-radius: 12px;

    }

}