.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;
}

@media (hover: hover) and (pointer: fine) {
    .notification-component {
        transition-timing-function: var(--transition-timing-function);
        transition-duration: var(--transition-duration);
    }
}

@media (hover: none) {
    .notification-component {
        transition-timing-function: var(--mobile-transition-timing-function);
        transition-duration: var(--mobile-transition-duration);
    }
}

@media (hover: hover) and (pointer: fine) {
    .notification-component:hover {
        padding: 12px 20px 12px 20px;
    }
}

@media (hover: none) {
    .notification-component:active {
        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);
}

@media (hover: hover) and (pointer: fine) {
    .notification-component.variant-default:hover {
        box-shadow: var(--shadow-highlight);
    }
}

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

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

@media (hover: hover) and (pointer: fine) {
    .notification-component.variant-warning:hover {
        box-shadow: var(--shadow-warning);
    }
}

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

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

@media (hover: hover) and (pointer: fine) {
    .notification-component.variant-error:hover {
        box-shadow: var(--shadow-error);
    }
}

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