/* =========================
    ALERTS
    ========================= */
.messages {
    position: fixed;
    top: 70px;
    left: 50%;
    width: min(calc(100% - 2rem), 60rem);
    z-index: 200;
    transform: translateX(-50%);
    pointer-events: none;
}


.alert {
    display: grid;
    grid-template-columns: 2rem 1fr 2rem;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--alert-border);
    border-radius: 0.5rem;
    background: var(--alert-bg);
    color: var(--alert-text);
    pointer-events: auto;
}


.alert__message {
    grid-column: 2;
    text-align: center;
}


.alert--success {
    --alert-bg: var(--success-bg);
    --alert-border: var(--success-border);
    --alert-text: var(--success-text);
}


.alert--info {
    --alert-bg: var(--info-bg);
    --alert-border: var(--info-border);
    --alert-text: var(--info-text);
}


.alert--warning {
    --alert-bg: var(--warning-bg);
    --alert-border: var(--warning-border);
    --alert-text: var(--warning-text);
}


.alert--error {
    --alert-bg: var(--error-bg);
    --alert-border: var(--error-border);
    --alert-text: var(--error-text);
}


.alert__close {
    grid-column: 3;
    justify-self: end;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}