.toasts {
    position: fixed;
    top: 1em;
    right: 1em;
    z-index: var(--layer-toasts);
}

.toast {
    width: 20em;
    height: calc-size(auto, size);
    color: var(--toast-text-color);
    border: 1px solid var(--toast-border-color);
    background-color: var(--toast-background-color);
    border-radius: var(--size-m);
    padding: var(--size-xs);
    display: flex;
    align-items: center;
    margin-bottom: var(--size-xs);
    overflow: hidden;
    visibility: visible;
    transform: translateX(2em);
    opacity: 0;
    transition: transform var(--base-transition),
    opacity var(--base-transition),
    height var(--base-transition),
    margin var(--base-transition),
    padding var(--base-transition),
    visibility var(--base-transition);
}

.toast--inline {
    opacity: 1;
    transform: none;
    display: inline-flex;
}

.toast--active {
    opacity: 1;
    transform: none;
}

.toast--destroyed {
    margin: 0;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    visibility: hidden;
}

.toast__icon {
    padding-right: var(--size-xxs);
    color: var(--toast-border-color);
}

.toast__message {
    margin-top: -0.1em;
    line-height: 1.25em;
    font-size: 0.9em;
    flex-grow: 1;
    text-align: start;
}

.toast--success {
    --toast-text-color: var(--color-positive-dark);
    --toast-border-color: var(--color-positive);
    --toast-background-color: var(--color-positive--light);
}

.toast--info {
    --toast-text-color: var(--color-info-dark);
    --toast-border-color: var(--color-info);
    --toast-background-color: var(--color-info--light);
}

.toast--error {
    --toast-text-color: var(--color-negative-dark);
    --toast-border-color: var(--color-negative);
    --toast-background-color: var(--color-negative--light);
}