.notification-component {
    display: flex;
    align-items: center;
    align-content: stretch;
    justify-content: stretch;
    color: var(--color-text-accent);
    gap: 16px;
    padding: 8px 16px 8px 16px;
    border-radius: 8px;
    box-sizing: border-box;
    transition-property: opacity, padding, box-shadow;
    transition-timing-function: var(--transition-timing-function);
    transition-duration: var(--transition-duration);
}

.notification-component:hover {
    padding: 12px 20px 12px 20px;
}

.notification-component-close {
    cursor: pointer;
    font-size: 24px;
    line-height: 24px;
}

/* Default variant */
.notification-component.variant-default {
    background-color: var(--color-highlight);
    box-shadow: var(--shadow-small-highlight);
}

    .notification-component.variant-default:hover {
        box-shadow: var(--shadow-highlight);
    }

/* Warning variant */
.notification-component.variant-warning {
    background-color: var(--color-warning);
    box-shadow: var(--shadow-small-warning);
}

    .notification-component.variant-warning:hover {
        box-shadow: var(--shadow-warning);
    }

/* Error variant */
.notification-component.variant-error {
    background-color: var(--color-error);
    box-shadow: var(--shadow-small-error);
}

    .notification-component.variant-error:hover {
        box-shadow: var(--shadow-error);
    }