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

.message-alert {

    display: flex;
    flex-direction: column;

    gap: var(--space-3);

    padding:
        var(--space-2)
        var(--space-3);

    background: var(--component-1);

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

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

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

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

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

}

.message-alert-content {

    display: flex;

    align-items: center;

    gap: var(--space-3);

}

.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);

}

.message-alert-button {

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

    width: 100%;

    box-sizing: border-box;

    margin-top: 4px;

}

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

.signup-message-alert {
    flex-direction: row;
    align-items: center;
}

.signup-message-alert .message-alert-button {

    width: auto;

    margin-top: 0;

    flex-shrink: 0;

    white-space: nowrap;

}