/* ====== НАСТРОЙКИ ====== */

:root {
    --menu-text-color: #ffffff;        /* обычный текст */
    --menu-hover-color: #7ED321;       /* цвет при наведении */
    --menu-active-color: #7ED321;      /* цвет активного пункта */

    --menu-bg-hover: transparent;      /* фон при наведении */
    --menu-bg-active: transparent;     /* фон активного пункта */

    --menu-underline-color: #7ED321;   /* цвет линии */
    --menu-underline-height: 2px;      /* толщина линии */
}

/* ====== БАЗА ====== */

.menu-link .tn-atom {
    color: var(--menu-text-color) !important;
    transition: all 0.3s ease;
    position: relative;
}

/* Hover */
.menu-link:hover .tn-atom {
    color: var(--menu-hover-color) !important;
    background: var(--menu-bg-hover);
}

/* Active */
.menu-link.active-menu .tn-atom {
    color: var(--menu-active-color) !important;
    background: var(--menu-bg-active);
}

/* Подчеркивание */
.menu-link .tn-atom::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: var(--menu-underline-height);
    background: var(--menu-underline-color);
    transition: width 0.3s ease;
}

/* Hover underline */
.menu-link:hover .tn-atom::after {
    width: 100%;
}

/* Active underline */
.menu-link.active-menu .tn-atom::after {
    width: 100%;
}