/**
 * bookmarks.css
 * Страница: все
 * Блок: звёздочка у заголовка и полоса закладок в шапке
 *
 * Внутри:
 * 1. Звёздочка рядом с названием страницы
 * 2. Полоса закладок в шапке
 */

/* 1. Звёздочка
   ------------------------------------------------------------------
   Незакреплённая приглушена и проявляется при наведении: человек
   пришёл читать название страницы, а не разглядывать кнопки рядом
   с ним. Закреплённая горит жёлтым — это уже сообщение, а не кнопка. */

.bookmark-star {
    padding: 0 .25rem;
    border: 0;
    background: none;
    line-height: 1;
    font-size: 1.1rem;
    color: var(--bs-secondary-color);
    opacity: .35;
    cursor: pointer;
    transition: opacity .15s, color .15s;
}

.bookmark-star:hover,
.bookmark-star:focus-visible {
    opacity: 1;
    color: #f0ad2e;
}

.bookmark-star.is-pinned {
    opacity: 1;
    color: #f0ad2e;
}

/* 2. Полоса закладок
   ------------------------------------------------------------------
   Одна строка: закладок дюжина, и переносить их на вторую строку
   значит раздвинуть шапку и отнять место у страницы. Не влезло —
   прокручивается вбок. */

.bookmark-bar {
    display: flex;
    align-items: center;

    /*
     * Промежуток между закладками маленький, но не нулевой.
     *
     * Закладка подсвечивается при наведении и на текущей странице,
     * и промежуток — это то, что отделяет одну подсветку от другой.
     * Убрать совсем — две соседние сольются в одно длинное пятно,
     * и станет непонятно, где кончается одна ссылка и начинается
     * другая. Сделать большим — полоса растягивается на пол-шапки.
     */
    gap: .125rem;

    min-width: 0;

    /*
     * Отступ от кнопки меню.
     *
     * Было целых 16 точек, и вместе с собственным отступом кнопки
     * получался провал шириной почти в половину закладки. Оставляем
     * ровно столько, чтобы закладка не липла к трём полоскам.
     */
    margin-left: .25rem;

    overflow-x: auto;

    /* Полоса прокрутки в шапке выглядела бы поломкой. */
    scrollbar-width: none;
}

.bookmark-bar::-webkit-scrollbar {
    display: none;
}

.bookmark-bar-item {
    flex: 0 0 auto;
    max-width: 11rem;

    /*
     * Поля соразмерны: по бокам вдвое больше, чем сверху и снизу.
     *
     * Было втрое с лишним, и подсветка вытягивалась в узкую полоску
     * заметно шире самого слова. Соразмерные поля дают ровную плашку,
     * и полоса закладок читается как ряд кнопок, а не как строка
     * подчёркнутых слов.
     */
    padding: .25rem .5rem;

    border-radius: .3rem;
    font-size: .875rem;
    color: var(--bs-body-color);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bookmark-bar-item:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

/*
 * Страница, на которой человек сейчас. Без подсветки он будет жать
 * на закладку, уже находясь на ней, и не понимать, почему ничего
 * не происходит.
 */
.bookmark-bar-item.is-current {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
}

/*
 * На телефоне полоса остаётся, только теснее.
 *
 * Сперва её здесь прятали: казалось, что места в шапке нет вовсе.
 * Места хватает — имя сотрудника на мелком экране и так не выводится,
 * справа остаётся один значок. А закладки на телефоне нужнее, чем
 * на мониторе: там до нужной страницы идти через меню, которое
 * ещё надо открыть.
 *
 * Влезает три-четыре штуки, остальные прокручиваются вбок пальцем.
 */
@media (max-width: 767.98px) {
    .bookmark-bar {
        /*
         * Закладка уже: на узком экране важнее, чтобы их поместилось
         * несколько, чем чтобы название читалось целиком. Не влезло —
         * обрежется многоточием, а полное название остаётся
         * в подсказке.
         */
        --bookmark-width: 6.5rem;

        margin-left: .125rem;
    }

    .bookmark-bar-item {
        max-width: var(--bookmark-width);
        padding: .25rem .4rem;
        font-size: .8125rem;
    }
}