/* Задайте своё человеческое название файла между '' */
/* --human-name-css: 'Панель навигации уроков 2.0'; */

/* Укажите имя автора между '' */
/* --human-author-css: 'Игорь Лохман'; */

/* Задайте путь до аватара автора между "" */
/* --human-author-image-css: "/wp-content/plugins/super-style/assets/image/igor-main-author-ava.png"; */

/* Задайте своё человеческое описание файла между '' */
/* --human-description-css: 'Аккуратная и более удобная панель навигации по материалам рубрики.'; */

/* ----------------- */
/* НАСТРОЙКИ ДИЗАЙНА */
/* ----------------- */

:root {

/* Фон кнопки "Выбрать урок" */
--bg-nav-panel-button: #83b444;

/* Цвет текста кнопки "Выбрать урок" */
--color-nav-panel-button: #ffffff;

/* Фон кнопки "Выбрать урок" - при наведении */
--bg-nav-panel-button-hover: #8BBE48;

/* Цвет текста кнопки "Выбрать урок" - при наведении */
--color-nav-panel-button-hover: #ffffff;

/* Закругление кнопки "Выбрать урок" */
--radius-nav-panel-button: 5px;

/* Вертикальное смещение кнопки "Выбрать урок" */
--ver-shift-nav-panel-button: 0px;

/* Горизонтальное смещение кнопки "Выбрать урок" */
--gor-shift-nav-panel-button: 0px;

/* Фон заголовка панели */
--bg-nav-panel: #0AA0FF;

/* Размер заголовка панели */
--title-size-nav-panel: 20px;

/* Размер иконки "Закрыть" */
--close-icon-size-nav-panel-button: 26px;

}

/* ------------------------- */
/* НЕ ТРОГАЙТЕ ВСЁ, ЧТО НИЖЕ */
/* ------------------------- */

/* ---------------------------------------- */
/* ПАНЕЛЬ НАВИГАЦИИ - СПИСОК УРОКОВ РУБРИКИ */
/* ---------------------------------------- */

/* Положение и дизайн кнопки "Выбрать урок" */

.top-nav-row a.nav-item[data-mbli3-menu-toggle] {
	color: var(--color-nav-panel-button);
	top: 220px;
    position: fixed;
    background: var(--bg-nav-panel-button);
	left: -68px;
	transform: rotate(-90deg) translate(var(--ver-shift-nav-panel-button), var(--gor-shift-nav-panel-button));
    text-transform: uppercase;
    border-radius: var(--radius-nav-panel-button);
	transition: all 0.2s ease-in-out;
}

/* Кнопка "Выбрать урок" - при наведении и клике */

.top-nav-row a.nav-item[data-mbli3-menu-toggle]:hover {
    left: -65px;
	background: var(--bg-nav-panel-button-hover);
	color: var(--color-nav-panel-button-hover)!important;
	transition: all 0.2s ease-in-out;
}

.top-nav-row a.nav-item[data-mbli3-menu-toggle]:active {
    background: var(--bg-nav-panel-button);
	color: var(--color-nav-panel-button-hover)!important;
}

/* Иконка внутри кнопки "Выбрать урок" */

.top-nav-row .nav-item[data-mbli3-menu-toggle] .iconmoon {
	color: var(--color-nav-panel-button)!important;
	transition: all 0.2s ease-in-out;
}

/* Цвет иконки в кнопке - при наведении */

.top-nav-row .nav-item[data-mbli3-menu-toggle]:hover .iconmoon {
	color: var(--color-nav-panel-button-hover)!important;
}

/* РАСКРЫТАЯ ПАНЕЛЬ НАВИГАЦИИ */
/* -------------------------- */

/* Обёртка панели */

body .menu-opened.mbli3-left-menu {
	/* Корректировка ширины */
	width: fit-content;
	/* Анимация панели */
	animation-name: menu_slide, fadein;
	animation-duration: .5s, .5s;
	/* Тень - затемнение 100% ширины окна браузера */
	box-shadow: 0 0 0 100vw rgb(0 0 0 / 60%);
	/* animation: menu_slide .5s forwards; */
}

/* Анимация прозрачности панели Навигации и Затемнения фона */

@keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Панель Навигации */

body .mbli3-left-menu .mbli3-left-menu-holder {
	border: none;
}

/* Обёртка Заголовка панели */

body .mbli3-left-menu .mbli3-left-menu-holder > .container {
	display: flex;
	align-items: center;
    flex-flow: row-reverse;
    position: fixed;
    background: var(--bg-nav-panel);
	z-index: 501;
}

/* Заголовок панели */

@media (min-width: 768px) {

body .menu-opened.mbli3-left-menu .mbli3-page-title {
    margin: 0;
	width: 100%;
    text-align: left;
	padding: 14px 15px;
	font-size: var(--title-size-nav-panel);
	/* обрезаем длинные названия рубрик */
	white-space: nowrap;      /* Убираем перенос текста */
    overflow: hidden;         /* Обрезаем всё за пределами блока */
    text-overflow: ellipsis;  /* Добавляем многоточие */
}
}

/* Кнопка "Закрыть" в панели */

@media (min-width: 768px) {

body .menu-opened.mbli3-left-menu .mbli3-menu-close {
	font-size: var(--close-icon-size-nav-panel-button);
	margin-top: 0;
	transition: none;
	display: flex;
	float: none;
   }
}

/* Кнопка "Закрыть" в панели - при фокусе */

body .menu-opened.mbli3-left-menu .mbli3-menu-close:focus {
	color: #ffffff;
}

/* Иконка в кнопке "Закрыть" */

body .menu-opened.mbli3-left-menu .mbli3-menu-close .icon-close {
	z-index: 502;
	transition: .2s ease;
}

/* Обёртка списка материалов */

body .mbli3-left-menu .mbli3-left-menu-holder .materials-row {
	margin-top: calc(70px + var(--title-size-nav-panel));
}