/* ==========================================
   MESSAGE ALERT
========================================== */

.message-alert {

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

    gap: var(--space-3);

    padding:
        var(--space-4)
        var(--space-5);

    background: var(--component-1);

    border: 1px solid var(--separator);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

}

.message-alert.show {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

}

.message-alert-icon {

    display: flex;

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

    width: 20px;
    height: 20px;

    flex-shrink: 0;

}

.message-alert-icon svg {

    width: 100%;
    height: 100%;

    fill: currentColor;

}

.message-alert-text {

    color: var(--text);

    font-size: 15px;
    font-weight: 500;

    line-height: 1.4;

}

.message-alert-wrapper {

    display: flex;

    justify-content: center;

    margin-top: var(--space-4);

}

.message-alert.success .message-alert-icon {

    color: var(--success);

}

.message-alert.error .message-alert-icon {

    color: var(--error);

}