.snackbar-box {
    position: fixed;
    bottom: 1rem;
    right: 2rem;
    margin-left: 2rem;
    z-index: 1000;
    background-color: var(--main-color);
    color: var(--bg-color);
    padding: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--box-shadow-color);
    display: none;
}

.snackbar-icon {
    vertical-align: middle;
    display: inline-block;
    margin-right: 0.5rem;
    background-color: var(--bg-variant-color);
    mask-repeat: no-repeat;
    mask-position: center;
    width: 1.75em;
    height: 1.75em;
    box-sizing: border-box;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" height="24px" width="24px"><path d="M480-280q17 0 28.5-11.5T520-320v-160q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480v160q0 17 11.5 28.5T480-280Zm0-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');
}

.snackbar-message {
    vertical-align: middle;
    display: inline-block;
    font-size: 1rem;
    white-space: pre-wrap;
}

.snackbar-close-button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1rem;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 0 0.5rem;
    padding: 0;

    background-color: currentColor;
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    width: 1.75em;
    height: 1.75em;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>');
    margin-left: 0.5rem;
    transform: rotate(0deg) scale(1);

    &:hover {
        transform: rotate(720deg);
    }

    &:active {
        transform: rotate(720deg) scale(1.1);
    }
}