.root-menu {
    position: relative;
    height: 100%;
}

.root-menu .root-menu__items {
    display: flex;
    align-items: center;
    height: 100%;
}

@media (width <= 1000px)
{
    .root-menu .root-menu__items {
        flex-direction: column;
    }
}

.root-menu .root-menu__items .menu-item {
    padding-right: 1.5rem;
    margin-right: 1.5rem;
    border-right: 1px solid var(--hr-color);
    position: relative;
    line-height: 38px;
    height: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
}

@media (width <= 1000px)
{
    .root-menu .root-menu__items .menu-item {
        border-right: none;
        border-top: 1px solid var(--hr-color);
        width: 100%;
        margin-right: 0;
    }

    .root-menu .root-menu__items .menu-item:last-child {
        border-bottom: 1px solid var(--hr-color);
    }
}

.root-menu .root-menu__items .menu-item:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
}

.root-menu .root-menu__items .menu-item .menu-item__link {
    color: var(--default-text-color);
    transition: color .3s ease;
    box-shadow: none;
}

@media (width <= 1000px)
{
    .root-menu .root-menu__items .menu-item .menu-item__link {
        font-size: var(--text-xl);
        padding: 1rem;
        width: 100%;
    }

    .root-menu .root-menu__items .menu-item.active .menu-item__link {
        color: var(--primary-color);
    }
}

.root-menu .root-menu__items .menu-item .menu-item__link:hover {
    color: var(--primary-color)
}

.root-menu .menu-item.menu-item--dropdown .submenu {
    display: flex;
    flex-direction: column;

    position: absolute;

    top: 100%;
    left: -20%;
    min-width: 300px;

    width: calc(100% + 20%);

    opacity: 0;
    visibility: hidden;

    transition: all .5s ease;

    background-color: var(--block-backgorund-color);
    padding: .5rem 1.2rem;

    border-radius: 10px;
    box-shadow: 0 0 10px rgba(144, 144, 144, 0.1);
}

@media (width <= 1000px)
{
    .root-menu .menu-item.menu-item--dropdown .submenu {
        width: 100%;
        min-width: 100%;
        position: relative;
        padding: 0;

        left: auto;
        top: auto;

        opacity: 1;
        visibility: visible;

        display: none;
        box-shadow: none;

        padding-left: 2rem;
    }
}

.root-menu .menu-item.menu-item--dropdown:hover .submenu {
    opacity: 1;
    visibility: visible;
    z-index: 101;
}

.root-menu .menu-item.menu-item--dropdown .submenu .item {
    --width-arrow-right: 22px;
    position: relative;
    min-height: var(--width-arrow-right);
}

.root-menu .menu-item.menu-item--dropdown .submenu .item a {
    color: var(--default-text-color);
    transition: color .3s ease;
    padding-right: calc(var(--width-arrow-right) + 1rem);
    width: 100%;
    display: block;
    position: relative;
    z-index: 2;
}

.root-menu .menu-item.menu-item--dropdown .submenu .item:first-child {
    margin-top: 0;
}

.root-menu .menu-item.menu-item--dropdown .submenu .item:last-child {
    margin-bottom: 0;
}

.root-menu .menu-item.menu-item--dropdown .submenu .item::before {
    content: '';

    position: absolute;

    top: 50%;
    right: 0;

    transform: translateY(-50%);

    width: var(--width-arrow-right);
    height: var(--width-arrow-right);

    background: url(./images/arrow-circle-right.svg) no-repeat center;
    background-size: contain;

    opacity: 0;
    transition: opacity .3s ease;
}

.root-menu .menu-item.menu-item--dropdown .submenu .item a:hover {
    color: var(--primary-color);
}

.root-menu .menu-item.menu-item--dropdown .submenu .item:hover::before {
    opacity: 1;
}