@use "variables" as *;
@import "mixins";

$notification-icon-size: 16px;

:host {
    display: block;
}

dot-custom-time {
    color: $color-palette-gray-700;
    display: block;
    font-size: $font-size-sm;
}

a {
    color: $black;
}

.notification-item {
    border-top: solid 1px $color-palette-gray-200;
}

.notification-item__icon {
    padding-top: $spacing-0;
    color: $color-palette-primary;
}

.notification-item__title {
    font-size: $font-size-sm;
}

.notification-item__title,
.notification-item__message {
    margin: 0;
}

.notification-item__message {
    line-height: 1.5rem;
}

.notification-item__wrapper {
    display: flex;
    flex-direction: row;
    padding: $spacing-3 0;
    align-items: self-start;
    gap: $spacing-3;
}

.warning {
    .notification-item__icon,
    .notification-item__link,
    .notification-item__title,
    .notification-item__title a {
        color: $color-palette-primary;
    }
}

.error {
    .notification-item__icon,
    .notification-item__link,
    .notification-item__title,
    .notification-item__title a {
        color: $color-palette-secondary;
    }
}
