/* -------------------------------------------
    Toggle Menu
---------------------------------------------- */

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

.toggle-menu {
    width: 280px;

    &.dropdown>a {
        position: relative;
        padding: 1.8rem 2rem;
        transition: background .3s, color .3s;

        &:after {
            position: absolute;
            content: '\e910';
            top: 50%;
            transform: translateY(-50%);
            #{$right}: 18px;
            font-size: .65em;
            font-family: $framework-font;
            color: inherit;
        }

        i {
            margin-top: -1px;
            font-size: 1.2em;
        }

        i+span {
            margin-#{$left}: 7px;
        }

        .hover {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
        }
    }

    &:hover>a {
        i:not(:first-child) {
            opacity: 0;
        }

        .hover {
            opacity: 1;
        }
    }

    .menu {
        padding: 2rem 0;

        .menu-item-has-children>a:after {
            #{$right}: 1rem;
        }
    }

    .menu>li {
        margin-#{$right}: 0;
    }

    .dropdown-box {
        padding: 0;
        #{$right}: auto;
    }

    &.dropdown::before,
    &.dropdown::after {
        #{$left}: 25px;
    }

    &.show .dropdown-box,
    .home &.show-home .dropdown-box {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    &.has-border {

        &.show,
        &:hover {
            &::after {
                top: calc(var(--alpha-dropdown-triangle-pos) + 2px); // Because of border
            }
        }

        &::before {
            content: '';
            position: absolute;
            z-index: 1001;
            top: -9999px;
            transform: if-ltr(translateX(-50%), translateX(50%));
            border: 11px solid transparent;
            border-bottom: 11px solid #e1e1e1;
            transition: opacity .4s ease;
            visibility: hidden;
            opacity: 0;
            cursor: pointer;
        }

        &.show::before,
        &:hover::before {
            visibility: visible;
            opacity: 1;
            top: calc(var(--alpha-dropdown-triangle-pos) + 1px);
            transform: if-ltr(translate3d(-50%, 0, 0), translate3d(50%, 0, 0));
        }

        .menu {
            border: 1px solid var(--alpha-change-border-color);
        }
    }
}

.sticky-content:not(.fixed) {
    .show-home {
        &::after {
            top: 100%;
        }

        .dropdown-box {
            top: calc(100% + 20px);
        }

        .dropdown-box,
        &::after {
            visibility: visible;
            opacity: 1;
        }

        .dropdown-box {
            transform: translate3d(0, 0, 0);
        }

        &::after {
            transform: if-ltr(translate3d(-50%, 0, 0), translate3d(50%, 0, 0));
        }

        @if use(menu-toggle-border) {
            &.has-border {
                &::before {
                    top: calc(100% - 1px);
                    visibility: visible;
                    opacity: 1;
                }

                @include only-for-retina() {
                    &::before {
                        top: calc(100% - 2px);
                    }
                }
            }
        }
    }
}

@include mq(1199px, max) {
    .toggle-menu {
        width: 240px;
    }
}