/* Snackbar — bottom notification */

.maf-snackbar {
    position: fixed;
    bottom: var(--maf-space-6);
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 2rem));
    z-index: 1200;
    display: flex;
    align-items: center;
    min-width: 320px;
    max-width: 560px;
    padding: var(--maf-space-3) var(--maf-space-4);
    border-radius: var(--maf-radius-md);
    font-family: var(--maf-font-body);
    font-size: var(--maf-font-size-sm);
    font-weight: var(--maf-font-weight-regular);
    line-height: 1.4;
    color: var(--maf-white);
    background-color: #323232;
    box-shadow:
        0 3px 5px -1px rgba(0, 0, 0, 0.2),
        0 6px 10px rgba(0, 0, 0, 0.14),
        0 1px 18px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transition:
        transform 300ms var(--maf-easing-enter),
        opacity 300ms var(--maf-easing-enter);
}

.maf-snackbar--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Message */

.maf-snackbar__message {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Action */

.maf-snackbar__action {
    margin-left: var(--maf-space-4);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--maf-cyan);
    font-family: var(--maf-font-body);
    font-size: var(--maf-font-size-sm);
    font-weight: var(--maf-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity var(--maf-duration-fast) var(--maf-easing-standard);
}

.maf-snackbar__action:hover {
    opacity: 0.8;
}

.maf-snackbar__action:focus-visible {
    outline: 2px solid var(--maf-cyan);
    outline-offset: 2px;
    border-radius: 2px;
}