/**
 * Polestar CSS
 */
 @import '../../themes/default/index';
 @import '../../mixins/index';
 
 @keyframes slide-down {
    0% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(.8);
    }
  100% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
    }
}
@-webkit-keyframes slide-down {
    0% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(.8);
    }
    100% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
    }
}
@-moz-keyframes slide-down {
    0% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(.8);
    }
    100% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
    }
}

@keyframes slide-up {
    0% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(.8);
    }
}
@-webkit-keyframes slide-up {
    0% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(.8);
    }
}
@-moz-keyframes slide-up {
    0% {
        opacity: 1;
        transform-origin: 0% 0%;
        transform: scaleY(1);
    }
    100% {
        opacity: 0;
        transform-origin: 0% 0%;
        transform: scaleY(.8);
    }
}

.@{mega-prefix-cls} {
    position: relative;
    line-height: 50px;
    > ul {
        margin: 0;
        list-style: none;
        white-space: nowrap;
        background: @gray-1;
        > li {
            display: inline-block;
            margin: 0 0 0 0;
            .font-noto();
            font-size: @font-size-lg1;
            &:hover {
                > a {
                    background: @gray-2;
                    color: @primary-6;
                }
            }
            > i {
                padding: 0 0 0 5px;
                color: @primary-2 !important;
            }
            > a {
                display: inline-block;
                padding: 0 20px;
                color: rgba(0, 0, 0, 0.65);
                text-align: center;
                text-decoration: none;
            }

            > .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-hidden {
                //display: block !important;
                //MegaMenu IE버그 문제로 주석처리
                // animation: slide-up 1s ease-out;
                // -webkit-animation: slide-up 1s ease-out;
                // -moz-animation: slide-up 1s ease-out;
                // -o-animation: slide-up 1s ease-out;
                //
                // -webkit-animation-play-state: running;
                // -o-animation-play-state: running;
                //
                // -moz-transition-duration: 0.3s;
                // -webkit-transition-duration: 0.3s;
                // -o-transition-duration: 0.3s;
                // transition-duration: 0.3s;
                //
                // -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
                // -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
                // -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
                // transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
            }

            @media all and (min-width:768px) and (max-width:1200px) {
                    > .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
                            width: 30% !important;
                    }
            }
            @media all and (min-width:1201px) and (max-width:1300px) {
                    > .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
                            width: 36% !important;
                    }
            }
            @media all and (min-width:1301px) and (max-width:1400px) {
                    > .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
                            width: 40% !important;
                    }
            }
            @media all and (min-width:1401px) and (max-width:1500px) {
                    > .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
                            width: 47% !important;
                    }
            }

            @media all and (min-width:1501px) and (max-width:1920px) {
                    > .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
                            width: 50% !important;
                    }
            }



            > .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
                width: 37%; /*해상도 1200 이하는 fix*/
                //max-width: 600px;
                min-width: 20%;
                display: block;

                // animation: slide-down 0.3s ease-out;
                // -webkit-animation: slide-down 0.3s ease-out;
                // -moz-animation: slide-down 0.3s ease-out;
            }

            > .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-config {
                //display: block !important;

                // animation: slide-down 0.5s ease-out;
                // -webkit-animation: slide-down 0.5s ease-out;
                // -moz-animation: slide-down 0.5s ease-out;

                > .@{mega-prefix-cls}-menu-container {
                    > ul {

                        > li {
                                // animation: slide-down 0.5s ease-out;
                                // -webkit-animation: slide-down 0.5s ease-out;
                                // -moz-animation: slide-down 0.5s ease-out;
                            font-family: @font-family;
                            font-weight: 400;
                            font-size: @font-size-base;
                            > .@{mega-prefix-cls}-menu-sub-container {
                                height: calc(100% ~'-' 29px);
                                background: @white;

                            }
                        }
                    }
                }
            }

            > .@{mega-prefix-cls}-menu {
                list-style: none;
                display: block;
                z-index: 1100;
                min-width: 180px;
                //width: 100%;
                padding: 0;
                margin: 0;
                background: @white;
                position: absolute;
                //top: 100%;
                //top: 51px;
                top: 50px;
                overflow: visible;
                box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
                border: @border-width-base @border-style-base @primary-3;
                border-radius: @border-radius-base;
                line-height: 30px;

        //MegaMenu IE버그 문제로 주석처리//
                // animation: slide-down 0.05s ease-out;
                // -webkit-animation: slide-down 0.05s ease-out;
                // -moz-animation: slide-down 0.05s ease-out;
                // -o-animation: slide-down 0.05s ease-out;
                //
                // transition-duration: 0.05s;
                // -webkit-transition-duration: 0.05s;
                // -moz-transition-duration: 0.05s;
                // -o-transition-duration: 0.05s;
                //
                // transition-timing-function: ease-out;
                // -webkit-transition-timing-function: ease-out;
                // -moz-transition-timing-function: ease-out;
                // -o-transition-timing-function: ease-out;
                //
                // animation-name: antSlideUpIn;
                // -webkit-animation-name: antSlideUpIn;
                // -moz-animation-name: antSlideUpIn;
                // -o-animation-name: antSlideUpIn;


                > .@{mega-prefix-cls}-menu-container {
                    > ul {
                        list-style: none;

                        // overflow-y: auto;
                        //max-width: 677px;
                        min-height: 300px;
                        height: 100%;
                        width: 180px;
                        // padding: 5px 10px 10px 20px;
                        // border-right: solid 1px #333;
                        > li {
                            display: block;
                            float: none;
                            width: auto;
                            margin: 0;
                            font-family: @font-family;
                            font-size: @font-size-base;
                            &:hover {
                                background: @primary-1;
                            }

                            > a {
                                display: block;
                                width: auto;
                                color: @gray-6;
                                padding: 5px 10px 3px 20px;
                                &:hover {
                                    color: @primary-color;

                                }
                                > i {
                                    display: block;
                                    float: right;
                                    padding: 7px 0 0 0;
                                }

                                /*Firefox 크로스브라우징*/
                                @-moz-document url-prefix() {
                                       > i {
                                           position: relative;
                                           bottom: 30px;
                                       }
                                  }

                            }

                            > .@{mega-prefix-cls}-menu-sub-container {
                                //display: block;
                                position: absolute;
                                width: calc(100% ~ '-' 180px);
                                //height: calc(100% ~'-' 29px);
                                top: 0;
                                right: 0;
                                bottom: 0;
                                background-color: @white;
                                display: none;
                                border-left: @border-width-base @border-style-base @primary-3;
                                animation: slide-right 0.1s ease-out;
                                -webkit-animation: slide-right 0.1s ease-out;
                                -moz-animation: slide-right 0.1s ease-out;


                            /* 애니메이션 */
                                // animation: slide-down 0.1s ease-out;
                                // -webkit-animation: slide-down 0.1s ease-out;
                                // -moz-animation: slide-down 0.1s ease-out;
                                //
                                // animation: slide-right 0.05s ease-out;
                                // -webkit-animation: slide-right 0.05s ease-out;
                                // -moz-animation: slide-right 0.05s ease-out;
                                // -o-animation: slide-right 0.05s ease-out;
                                //
                                // -moz-transition-duration: 0.05s;
                                // -webkit-transition-duration: 0.05s;
                                // -o-transition-duration: 0.05s;
                                // transition-duration: 0.05s;
                                //
                                // -moz-transition-timing-function: ease-in;
                                // -webkit-transition-timing-function: ease-in;
                                // -o-transition-timing-function: ease-in;
                                // transition-timing-function: ease-in;
                                // animation-name: antSlideLeftIn;


                                > .sub-menu-title {
                                    color: @primary-color;
                                    .font-noto();
                                    font-size: @font-size-lg;
                                    background: @primary-1;
                                    border-bottom: @border-width-base @border-style-base @primary-3;
                                    padding: 3px 0 3px 20px
                                }
                                > ul {
                                    list-style: none;
                                    padding: 0;
                                    margin: 0;
                                    position: absolute;
                                    left: 0;
                                    width: 100%;
                                    top: 40px;
                                    bottom: 0;
                                    overflow-y: auto;
                                    > li {
                                        float: left;
                                        //width: 165px;
                                        //margin: 0 0 0 20px;
                                        text-align: left;
                                        padding-left: 15px;

                                        > a {
                                            padding: 3px 5px;
                                            color: @gray-6;
                                            font-size: @font-size-base;
                                            &:hover {
                                                background: @primary-1;
                                                color: @primary-color;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                > .@{mega-prefix-cls}-menu-config {
                    background: @primary-1;
                    border-top: @border-width-base @border-style-base @primary-3;
                    border-radius: 0 0 3px 3px;
                    line-height: 0;
                    .ps-button {
                        background: none;
                        border: none;
                        color: @primary-color;
                        font-family: @font-family;
                        font-size: @font-size-sm;
                        &:hover {
                            color: @primary-5;
                        }
                    }
                    .ant-btn-clicked:after {
                        animation: none;
                    }
                }
            }

            @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
                > .@{mega-prefix-cls}-full {
                    //width: calc(100% ~ '-' 380px);
                    //border:solid 10px pink !important;
                    width: 100% !important;
                    left: 0 !important
                }
            }

            @media all and (min-width:768px) and (max-width:1200px) {
                    > .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
                            width: 30% !important;
                    }
            }

            > .@{mega-prefix-cls}-full {
                list-style: none;
        /****collapse full size로 펼쳐주기****/
                //display: block !important;
                z-index: 1050;
                //min-width: 500px;
                padding: 0;
                margin: 0;
                background-color: @white;
                position: absolute;
                top: 50px;
                overflow: visible;
                box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
                border: @border-width-base @border-style-base @primary-3;
                border-radius: @border-radius-base;
                margin: 0;

                // animation: slide-down 0.1s ease-out;
                // -webkit-animation: slide-down 0.1s ease-out;
                // -moz-animation: slide-down 0.1s ease-out;

                > .@{mega-prefix-cls}-menu-container {
                    padding: 10px 30px 20px 30px;
                    > ul {
                        list-style: none;
                        padding: 0;
                        // max-width: 677px;
                        max-height: 654px;
                        //width: 720px;
                        overflow-y: auto;
                        display: flex;
                        flex-wrap: wrap;
                        > li {
                            margin: 0 0 15px;
                            width: 180px;
                            // float: left;
                            // display: block;
                            flex: auto;
                            padding: 10px 0 0 0;
                            > a {
                                display: none;
                                &.sub-menu-title {
                                    display: block;
                                    color: @primary-6;
                                    .font-noto();
                                    font-size: @font-size-lg;
                                    padding: 0 0 0 10px;
                                    // text-transform: uppercase;
                                    line-height: 28px;
                                    border-left: @border-width-base2 @border-style-base @primary-5;
                                }
                            }
                            > .ps-mega-menu-sub-container {
                                display: block;
                                > .sub-menu-title {
                                    margin: 0;
                                    color: @primary-6;
                                    .font-noto();
                                    font-size: @font-size-lg;
                                    padding: 0 0 0 10px;
                                    // text-transform: uppercase;
                                    line-height: 28px;
                                    border-left: @border-width-base2 @border-style-base @primary-5;
                                }
                                > ul {
                                    list-style: none;
                                    padding: 0 0 0 7px;
                                    margin: 0;
                                    border-left: @border-width-base2 @border-style-base @primary-2;
                                    line-height: 32px;
                                    font-family: @font-family;
                                    > li {
                                        display: list-item;
                                        text-align: -webkit-match-parent;
                                        > a {
                                            padding: 3px;
                                            color: @gray-6;
                                            font-size: @font-size-base;
                                            &:hover {
                                                background: @primary-1;
                                                color: @primary-color;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                > .@{mega-prefix-cls}-menu-config {
                    background: @primary-1;
                    border-top: @border-width-base @border-style-base @primary-3;
                    border-radius: 0 0 3px 3px;
                    line-height: 0;
                    .ps-button {
                        background: none;
                        border: none;
                        color: @primary-color;
                        font-family: @font-family;
                        font-size: @font-size-sm;
                        &:hover {
                            color: @primary-5;
                        }
                    }
                    .ant-btn-clicked:after {
                        animation: none;
                    }
                }
            }



        }
    }
}