#toast {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 1rem;
}

.toast {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    max-width: 20rem;
    padding: var(--pd-md);
    margin-bottom: var(--pd-md);
    color: var(--grayColor50);
    background-color: hsl(from var(--primary-clr) h s calc(l + 10));
    border-radius: var(--br-xs);
    box-shadow: 0px 0px 7px var(--primary-clr);

    transform: translateX(-100%);
    opacity: 0;
    transition: transform 300ms ease-out, opacity 300ms ease-in;
}

/* Animation classes */
.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.fade-out {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 500ms ease-out, opacity 500ms ease-out;
}

.toast__aside {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: var(--br-xs);

    & svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

.toast__content {
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-inline-start: 0.75rem;
}

.toast__button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-hv-bg);
    color: var(--grayColor50);
    width: 2rem;
    height: 2rem;
    padding: -0.375rem;
    border-radius: var(--br-xs);
    margin-inline: -0.375rem;
    margin-block: -0.375rem;
    margin-inline-start: auto;
    transition: all 250ms ease-in-out;

    & svg {
        width: 0.75rem;
        height: 0.75rem;
    }
}

.toast__button:hover {
    color: var(--primary-hv-fg);
    background-color: var(--primary-hv-bg);
    transform: translateY(-3%);
}


.toast__aside--default {
    color: var(--accent-blue);
    background-color: hsl(from var(--accent-blue) h s calc(l + 30));
}

.toast__aside--success {
    color: hsl(from var(--accent-green) h s calc(l + 60));
    background-color: hsl(from var(--accent-green) h s calc(l - 5));
}

.toast__aside--danger {
    color: hsl(from var(--accent-red) h s calc(l + 30));
    background-color: hsl(from var(--accent-red) h s calc(l - 20));
}

.toast__aside--warning {
    color: hsl(from var(--accent-gold) h s calc(l + 15));
    background-color: hsl(from var(--accent-gold) h s calc(l - 15));
}