$menu-prefix-cls: $prefix-name + "menu";

.#{$menu-prefix-cls} {

    font-size: $fontSize;
    user-select: none;

    .fry-icon-arrow-down {
        transition: .3s;
    }

    &-horizontal {
        display: flex;

        .#{$menu-prefix-cls} {
            &-item {
                cursor: pointer;
                &:hover {
                    color: $primaryColor
                }
            }

            &-item,
            &-submenu {
                padding: 16px 12px;
                

            }

            &-submenu {
                padding-right: 0;
            }

            &-submenu {
                position: relative;

                &:hover {
                    .fry-menu-submenu-title {
                        color: $primaryColor
                    }

                    .fry-icon-arrow-down {
                        transform: rotate(180deg);

                    }

                }
            }
        }


    }


    &-vertical {
        border-right: 1px solid #ccc;

        .#{$menu-prefix-cls} {
            &-submenu-title {
                display: flex;
                justify-content: space-between;
            }

            &-submenu-title,
            &-item {
                cursor: pointer;
                padding: 16px 12px;
            }

            &-submenu-list {
                .#{$menu-prefix-cls}-item {
                    padding-left: 24px;
                } 

            }

            &-item {

                &-isactive {
                    background-color: lighten($primaryColor , 40%);
                    color: $primaryColor;
                    border-right-color: $primaryColor;
                    border-right-width: 1px;
                    border-right-style: solid;
                }

                &:hover {
                    color: $primaryColor;
                }
            }
        }
    }

    &-light {
        background-color: white;
    }

    &-item {
        display: block;
        outline: none;
        list-style: none;

        position: relative;
        z-index: 1;

        transition: all $transition-time $ease-in-out;




    }



    &-submenu-rotate {
        .fry-icon-arrow-down {
            transform: rotate(180deg);

        }
    }



}


.fry-drop {
    &-menu {
        box-shadow: 0 0.75rem 1rem rgb(189 197 209 / 30%);
        border-top: 0.1875rem solid #377dff;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        animation-duration: .3s;
        position: absolute;
        background: white;
        width: 100%;

        .fry-menu-item {
            display: block;
            width: 100%;
            clear: both;
            font-weight: 400;
            text-align: inherit;
            white-space: nowrap;
            background-color: transparent;
            border: 0;

            &:hover {
                color: var(#1b1d1f);
                background-color: rgba(189, 197, 209, 0.2);
            }
        }
    }
}