/* =========================================================
   СТАТУС HISTORY
   ========================================================= */

.history-status {

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

    font-size: 16px;

    font-weight: 400;

    line-height: 1.4;

    color: #374151;

}


/* =========================================================
   РОМБИЧЕСКИЕ ОБЪЕКТЫ
   ========================================================= */

.history-status-square-sky,
.history-status-square-blue,
.history-status-square-navy,
.history-status-square-graphite {

    display: inline-block;

    width: 12px;

    height: 12px;

    margin-right: 9px;

    border-radius: 3px;

    vertical-align: -1px;

    transform: rotate(45deg);

    transition:
        transform .25s ease;

}


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

.history-status-square-sky:hover,
.history-status-square-blue:hover,
.history-status-square-navy:hover,
.history-status-square-graphite:hover {

    transform:
        rotate(45deg)
        scale(1.08);

}


/* =========================================================
   СВЕТЛО-ГОЛУБОЙ
   ========================================================= */

.history-status-square-sky {

    background: radial-gradient(
        circle at 18% 28%,
        #E0F2FE 0%,
        #7DD3FC 22%,
        #38BDF8 58%,
        #0284C7 100%
    );

}


/* =========================================================
   СИНИЙ
   ========================================================= */

.history-status-square-blue {

    background: radial-gradient(
        circle at 28% 28%,
        #DBEAFE 0%,
        #60A5FA 18%,
        #2563EB 58%,
        #1E3A8A 100%
    );

}


/* =========================================================
   ТЕМНО-СИНИЙ
   ========================================================= */

.history-status-square-navy {

    background: radial-gradient(
        circle at 28% 28%,
        #A5B4FC 0%,
        #4F7DFF 18%,
        #1E40AF 56%,
        #172554 100%
    );

}


/* =========================================================
   ГРАФИТОВЫЙ
   ========================================================= */

.history-status-square-graphite {

    background: radial-gradient(
        circle at 28% 28%,
        #F9FAFB 0%,
        #D1D5DB 18%,
        #6B7280 56%,
        #374151 100%
    );

}


/* =========================================================
   КНОПКА HISTORY
   ========================================================= */

/* =========================================================
   ОБЩАЯ КНОПКА
   ========================================================= */

.history-button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 210px;

    margin: 0 auto;

    padding: 8px 15px;

    box-sizing: border-box;

    border-radius: 8px;

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

    font-size: 16px;

    font-weight: 500;

    line-height: 1.3;

    color: #FFFFFF;

    text-decoration: none;

    cursor: pointer;

    background: var(--blue);

    border: 1px solid var(--blue);

    box-shadow:
        0 1px 3px rgba(30, 64, 175, .15);

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

}


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

.history-button:hover {

    background: var(--blue-dark);

    border-color: var(--blue-dark);

    color: #FFFFFF;

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

    transform: translateY(-1px);

}


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

.history-button:active {

    transform: translateY(0);

}


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

.history-button:focus-visible {

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

    outline-offset: 2px;

}