@use "../utils/variables";

/*=====================
 Notification css start
==========================*/

.notification-setting {
    li {
        padding: calc(12px + (16 - 12) * ((100vw - 320px) / (1920 - 320)));
        border-radius: 8px;
        position: relative;
        background-color: rgba(variables.$gray-color, 0.2);
        text-transform: capitalize;
        display: block;

        &.unread {
            background-color: rgba(variables.$primary-color, 0.1);
            border-left: 2px solid variables.$primary-color;
        }

        +li {
            margin-top: 16px;
        }

        h4 {
            margin-bottom: 6px;
            color: #333;
            font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
            font-weight: 500;
            line-height: 1.2;
        }

        h5 {
            line-height: 1.2;
            color: variables.$grey;
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 0;
            font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));

            i {
                font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
            }
        }
    }
}

/*=====================
 Notification css end
==========================*/