.notification-container {
    position: fixed;
    z-index: var(--notification-container-z-index);
    display: flex;
    flex-direction: column;
    max-width: var(--notification-container-max-width);
}
.notification-container .notification {
    margin-bottom: var(--notification-margin-bottom);
}

.notification-container--top-right {
    top: var(--notification-container-offset);
    right: var(--notification-container-offset);
}
.notification-container--top-left {
    top: var(--notification-container-offset);
    left: var(--notification-container-offset);
}
.notification-container--top-center {
    top: var(--notification-container-offset);
    left: 50%;
    transform: translateX(-50%);
}
.notification-container--bottom-right {
    bottom: var(--notification-container-offset);
    right: var(--notification-container-offset);
}
.notification-container--bottom-left {
    bottom: var(--notification-container-offset);
    left: var(--notification-container-offset);
}
.notification-container--bottom-center {
    bottom: var(--notification-container-offset);
    left: 50%;
    transform: translateX(-50%);
}

.notification {
    display: flex;
    align-items: flex-start;
    background: var(--color-bg-panel);
    color: var(--color-text-primary);
    padding: var(--notification-padding);
    border-radius: var(--border-radius-base);
    box-shadow: var(--notification-box-shadow);
    min-width: var(--notification-min-width);
}

/* .notification--toast {
} */
.notification--snackbar {
    min-width: var(--notification-snackbar-min-width);
    background: var(--color-bg-app);
}

.notification--info {
    background: var(--color-feedback-info);
    color: var(--color-text-on-info);
}
.notification--success {
    background: var(--color-feedback-success);
    color: var(--color-text-on-success);
}
.notification--warning {
    background: var(--color-feedback-warning);
    color: var(--color-text-on-warning);
}
.notification--danger {
    background: var(--color-feedback-danger);
    color: var(--color-text-on-danger);
}

.notification__icon-wrapper {
    margin-right: var(--notification-icon-wrapper-margin-right);
    font-size: var(--notification-icon-wrapper-font-size);
    line-height: var(--notification-icon-wrapper-line-height);
}

.notification__content {
    flex-grow: 1;
}

.notification__message {
    margin: var(--notification-message-margin);
    padding: var(--notification-message-padding);
    line-height: var(--notification-message-line-height);
}

.notification__buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--notification-buttons-margin-top);
}

.notification__button {
    background: transparent;
    border: none;
    color: inherit;
    font-weight: var(--notification-button-font-weight);
    text-transform: uppercase;
    padding: var(--notification-button-padding);
    margin-left: var(--notification-button-margin-left);
    cursor: pointer;
    opacity: var(--notification-button-opacity);
}

.notification__button--ok,
.notification__button--cancel {
    opacity: var(--notification-button-hover-opacity);
}

.notification__button:hover {
    opacity: var(--notification-button-hover-opacity);
    background: var(--notification-button-hover-bg);
}

.notification--warning .notification__button {
    color: var(--color-text-on-warning);
}
.notification--warning .notification__button:hover {
    background: var(--notification-warning-button-hover-bg);
}

.notification__close-button {
    background: transparent;
    border: none;
    color: inherit;
    font-size: var(--notification-close-button-font-size);
    line-height: var(--notification-close-button-line-height);
    padding: var(--notification-close-button-padding);
    margin-left: var(--notification-close-button-margin-left);
    cursor: pointer;
    opacity: var(--notification-close-button-opacity);
}
.notification__close-button:hover {
    opacity: var(--notification-close-button-hover-opacity);
}

.notification {
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    opacity: 0;
    transform: translateY(var(--notification-animation-transform-y));
}

.notification-container--top-center .notification,
.notification-container--top-left .notification,
.notification-container--top-right .notification {
    transform: translateY(calc(-1 * var(--notification-animation-transform-y)));
}

.notification.is-entering {
    opacity: 1;
    transform: translateY(0);
}

.notification.is-exiting {
    opacity: 0;
    transform: translateY(var(--notification-animation-transform-y));
}