/* -------------------------------------------
    Vertical Menu
---------------------------------------------- */

@import '../config';
@import '../mixins';
@import '../direction';

.menu.vertical-menu {
    display: block;
    max-width: 100%;

    .header & {
        display: block;
    }

    li>a {
        display: block;
    }

    >li {
        >ul {
            transform: translate3d(if-ltr(-15px, 15px), 0, 0);
        }

        >a {
            &::after {
                content: none;
            }
        }

        &:hover,
        &.show {
            >ul {
                #{$left}: 100%;
                top: 0;
                transform: translate3d(0, 0, 0);
            }
        }

        &:first-child:hover,
        &:first-child.show {
            >ul {
                top: -1rem;
            }
        }
    }

    >.menu-item-has-children {
        &::after {
            border: 11px solid transparent;
            border-#{$right}: 11px solid var(--alpha-change-color-light-1);
        }

        &:hover,
        &.show {
            &::after {
                top: 50%;
                #{$left}: calc(100% - 20px);
                transform: translate3d(0, -50%, 0);
            }

            >a::after {
                #{$right}: calc(var(--alpha-menu-has-children-arrow) - 8px);
            }
        }

        >a {
            &::after {
                position: absolute;
                #{$right}: 0;
                content: if-ltr('\f054', '\f053');
                font-size: .7em;
                transition: #{$right} .3s ease;
            }
        }
    }

    .megamenu {
        >li {
            >a {
                margin-bottom: 1.6rem;

                &:before {
                    position: absolute;
                    content: '';
                    left: 0;
                    right: 0;
                    height: 1px;
                    background-color: var(--alpha-change-border-color);
                    bottom: -.8rem;
                }
            }
        }
    }

    &.no-arrow {
        >li {
            display: flex;

            >a {
                &::after {
                    content: none;
                }
            }
        }
    }
}

.vertical-menu.dropdown-menu>li {
    padding: 0 1rem;
}