/* =========================================================
   УВЕДОМЛЕНИЯ
   ========================================================= */


/* =========================================================
   ЭЛЕМЕНТ УВЕДОМЛЕНИЯ
   ========================================================= */

.notification-item {

    width: 100%;

    margin: 0 0 16px 0;

    padding: 0;

    box-sizing: border-box;

}


/* =========================================================
   ОСНОВНАЯ СТРОКА УВЕДОМЛЕНИЯ
   ========================================================= */

.notification-button {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 56px;

    margin: 0;

    padding: 14px 18px;

    box-sizing: border-box;

    border: 1px solid #D1D5DB;

    border-radius: 8px;

    background: #FFFFFF;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.4;

    color: #4B5563;

    text-align: left;

    cursor: pointer;

    box-shadow:
        0 1px 3px rgba(17, 24, 39, .06);

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;

}


/* =========================================================
   ОСНОВНОЙ ТЕКСТ
   ========================================================= */

.notification-button-text {

    flex: 1;

}


/* =========================================================
   СЧЁТЧИК
   ========================================================= */

.notification-button-count {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-left: 20px;

    white-space: nowrap;

}


/* =========================================================
   ПОДПИСЬ СЧЁТЧИКА
   ========================================================= */

.notification-button-count-label {

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.4;

    color: #374151;

    transition:
        color .2s ease;

}


/* =========================================================
   ЧИСЛО СЧЁТЧИКА
   ========================================================= */

.notification-button-counter {

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 17px;

    font-weight: 600;

    line-height: 1;

    color: var(--blue);

    transition:
        color .2s ease;

}


/* =========================================================
   НАВЕДЕНИЕ
   ========================================================= */

.notification-button:hover {

    background: #F5F7FA;

    border-color: var(--blue);

    color: var(--text-main);

    box-shadow:
        0 4px 10px rgba(30, 64, 175, .10);

    transform: translateY(-1px);

}


/* =========================================================
   НАВЕДЕНИЕ — ЧИСЛО
   ========================================================= */

.notification-button:hover
.notification-button-counter {

    color: var(--blue-dark);

}


/* =========================================================
   АКТИВНОЕ СОСТОЯНИЕ
   ========================================================= */

.notification-button.active {

    background: #FFFFFF;

    border-color: var(--blue);

    color: var(--blue);

    box-shadow:
        0 2px 6px rgba(30, 64, 175, .10);

}


/* =========================================================
   АКТИВНОЕ СОСТОЯНИЕ — ОСНОВНОЙ ТЕКСТ
   ========================================================= */

.notification-button.active
.notification-button-text {

    color: var(--blue);

}


/* =========================================================
   АКТИВНОЕ СОСТОЯНИЕ — ПОДПИСЬ
   ========================================================= */

.notification-button.active
.notification-button-count-label {

    color: var(--blue);

}


/* =========================================================
   АКТИВНОЕ СОСТОЯНИЕ — ЧИСЛО
   ========================================================= */

.notification-button.active
.notification-button-counter {

    color: var(--blue);

}


/* =========================================================
   АКТИВНОЕ СОСТОЯНИЕ — НАВЕДЕНИЕ
   ========================================================= */

.notification-button.active:hover {

    background: #F5F7FA;

    border-color: var(--blue);

    color: var(--blue);

    box-shadow:
        0 4px 10px rgba(30, 64, 175, .12);

}


/* =========================================================
   АКТИВНОЕ СОСТОЯНИЕ — НАВЕДЕНИЕ
   ТЕКСТ
   ========================================================= */

.notification-button.active:hover
.notification-button-text {

    color: var(--blue);

}


/* =========================================================
   АКТИВНОЕ СОСТОЯНИЕ — НАВЕДЕНИЕ
   СЧЁТЧИК
   ========================================================= */

.notification-button.active:hover
.notification-button-count-label,
.notification-button.active:hover
.notification-button-counter {

    color: var(--blue);

}


/* =========================================================
   НАЖАТИЕ
   ========================================================= */

.notification-button:active {

    transform: translateY(0);

}


/* =========================================================
   FOCUS
   ========================================================= */

.notification-button:focus-visible {

    outline: 2px solid var(--blue);

    outline-offset: 2px;

}


/* =========================================================
   РАСКРЫВАЕМЫЙ ТЕКСТ
   ========================================================= */

.notification-message {

    margin-top: 8px;

    padding: 14px 18px;

    box-sizing: border-box;

    border-left: 3px solid var(--blue);

    border-radius: 0 6px 6px 0;

    background: #F8FAFC;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.5;

    color: #4B5563;

}

/* =========================================================
   ПЕРЕНОСЫ СТРОК В ТЕКСТЕ УВЕДОМЛЕНИЯ
   ========================================================= */

.notification-message-pre {

    white-space: pre-line;

}

/* =========================================================
   КНОПКА УДАЛЕНИЯ УВЕДОМЛЕНИЯ
   ========================================================= */

.notification-delete {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 15px;

    border-radius: 8px;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 16px;

    font-weight: 500;

    line-height: 1.3;

    color: #FFFFFF;

    background: #6B7280;

    border: 1px solid #6B7280;

    box-sizing: border-box;

    cursor: pointer;

    box-shadow:
        0 1px 3px rgba(17, 24, 39, .12);

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;

}


/* =========================================================
   КНОПКА УДАЛЕНИЯ — НАВЕДЕНИЕ
   ========================================================= */

.notification-delete:hover {

    background: #4B5563;

    border-color: #4B5563;

    color: #FFFFFF;

    box-shadow:
        0 4px 10px rgba(17, 24, 39, .18);

    transform: translateY(-1px);

}


/* =========================================================
   КНОПКА УДАЛЕНИЯ — НАЖАТИЕ
   ========================================================= */

.notification-delete:active {

    transform: translateY(0);

}


/* =========================================================
   КНОПКА УДАЛЕНИЯ — FOCUS
   ========================================================= */

.notification-delete:focus-visible {

    outline: 2px solid #6B7280;

    outline-offset: 2px;

}


/* =========================================================
   ЗАГОЛОВОК УВЕДОМЛЕНИЙ
   ========================================================= */

.notification-title {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    box-sizing: border-box;

    margin: 0 0 20px 0;

    padding: 0 2px;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 18px;

    font-weight: 600;

    line-height: 1.4;

    color: #4B5563;

    letter-spacing: .05px;

}