@use "mixins";

// main: style.scss

.mega-content * {
    box-sizing: border-box;
}
.mega-container .mega-row{
    padding: mixins.$gutter;
    @include mixins.for-mobile {
        padding: calc( mixins.$gutter/2 );
        .mega-col {
            margin-bottom: 15px;
            &:last-of-type {
                margin-bottom: 0px;

            }
        }
    }
}
.mega-row {
    &::after{
        @include mixins.clearfix();
    }
}
#easymega-wp-page {
    @include mixins.for-desktop() {
        .easymega-wp .mega-item:hover .mega-content,
        .easymega-wp .mega-item.mega-hover .mega-content {
            width: 100%;
            max-width: 99999px;
            opacity: 1;
            height: initial;
        }

        .mega-item {
            &:hover, &.mega-hover {
                ul, ol {
                    visibility: visible;
                }
            }


            &.mega-full {
                .mega-content {
                    .mega-inner {
                        box-shadow: none;
                        border: 0;
                    }
                }
            }

        }

        .mega-content {
            border: 0px none ;
            box-shadow: none;
            -webkit-transform: translateX(0) !important;
            -moz-transform: translateX(0) !important;
            -ms-transform: translateX(0) !important;
            -o-transform: translateX(0) !important;
            transform: translateX(0) !important;

            .mega-inner {
                box-shadow: 0 9px 14px rgba(0, 0, 0, 0.05);
                border: 1px solid #e9e9e9;
            }

            .mega-row {
                &:after {
                    @include mixins.clearfix();
                }
                .mega-col {
                    float: left;
                    padding-right: mixins.$gutter;
                    &:last-child {
                        padding-right: 0px;
                    }
                }
            }

            @for $i from 1 through 12 {
                .col-#{$i} {
                    width: calc($i/ 12) * 100%; 
                } 
            }
        }
    }
    .mega-col {
        .mega-widget {
            margin-top: mixins.$gutter;
            &:first-child {
                margin-top: 0px;
            }
        }

    }
}

#easymega-wp-page {
    @include mixins.for-mobile() {
        .mega-item {
            .mega-inner {
                ul, ol {
                    display: block;
                    top: auto;
                    left: auto;
                    position: relative;
                }
            }
        }
    }
}