{"version":3,"file":"blocks/mega-menu/index.css","mappings":";;;AAEA;EACC;AADD;;AAIA;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACH;EACG;AAFJ;;AAII;EACI;EACA;AAFR;;AAKI;EACI;EACA;AAHR;;AAUI;EACI;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AARR;;AAWQ;EACI;AATZ;;AAYE;EACC;AAVH;;AAgBQ;EACI;AAdZ;;AAmBI;EACI;AAjBR;;AAqBA;EACC;EACA;AAlBD;;AAqBA;EAGE;IACC;EApBD;AACF;;AA2BQ;EACI;EACA;AAzBZ;;AA4BQ;EACI;EACA;AA1BZ;;AA6BQ;EACI;AA3BZ;;AA6BY;EACI;AA3BhB;;AAmCC;EACC;AAhCF;;AAwCY;EACI;AArChB;;AAwCY;EACI;AAtChB;;AAyCY;;EAEI;AAvChB;;AA4CC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA1CF,C;;;;ACvGQ;;;EAGI;AAFZ;AASQ;EAEI;EACA;AARZ;AAaA;EACC;EACA;EACA;AAVD;AAaA;EACC;EACA;AAVD;AAYC;EACC;AAVF;AAaC;EACC;AAXF;AAcC;EACC;AAZF;AAeC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AAbF;AAeE;EACC;EACA;EACA;EACA;EACA;AAbH;AAiBC;EACC;EACA;AAfF;AAkBC;EACC;EACA;AAhBF;AAmBC;;EAEC;AAjBF;AAoBC;EACC;AAlBF;AAsBA;EACC;EACA;EACA;EACA;AAnBD;AAqBC;EACC;EACA;EACA;EACA;AAnBF;AAqBE;EACC;AAnBH,C","sources":["webpack://ollie-menu-designer/./src/blocks/mega-menu/view.scss","webpack://ollie-menu-designer/./src/blocks/mega-menu/edit.scss"],"sourcesContent":["// Front-end specific styles.\n\nbody:has(.wp-block-ollie-mega-menu__menu-container.menu-width-full) {\n\toverflow-x: hidden;\n}\n\n.wp-block-ollie-mega-menu__menu-container {\n    height: auto;\n    left: 0;\n    opacity: 0;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    // Closing transition: delay fade-out so new menu appears first\n    transition: opacity 0.075s ease-out 0.1s, visibility 0s linear 0.175s;\n    visibility: hidden;\n    z-index: 100;\n\tcolor: initial;\n    background-color: initial;\n\n    &.menu-width-content {\n        max-width: var(--wp--style--global--content-size);\n        width: var(--wp--style--global--content-size);\n    }\n\n    &.menu-width-wide {\n        max-width: var(--wp--style--global--wide-size);\n        width: var(--wp--style--global--wide-size);\n    }\n\n    &.menu-width-full {\n        // Width set via JS to avoid 100vw overflow issues\n    }\n\n    .menu-container__close-button {\n        align-items: center;\n        -webkit-backdrop-filter: blur(16px) saturate(180%);\n        backdrop-filter: blur(16px) saturate(180%);\n        background-color: #ffffffba;\n        border: none;\n        border-radius: 3px;\n        cursor: pointer;\n        display: flex;\n        justify-content: center;\n        opacity: 0;\n        padding: 4px;\n        position: absolute;\n        right: var(--wp--preset--spacing--medium);\n        text-align: center;\n        top: var(--wp--preset--spacing--medium);\n        transition: opacity .2s ease;\n        z-index: 100;\n\n        // Show the close button when focused (for keyboard navigation)\n        &:focus {\n            opacity: 1;\n        }\n\n\t\tsvg path {\n\t\t\tfill: #000;\n\t\t}\n    }\n\n    // Show the close button when the mega menu is hovered.\n    &:hover {\n        .menu-container__close-button {\n            opacity: 1;\n        }\n    }\n\n    // This ensures navigation menu inside of mega menus display correctly.\n    .is-responsive {\n        display: flex;\n    }\n}\n\n.wp-block-navigation__responsive-container.is-menu-open .wp-block-ollie-mega-menu:has(.wp-block-ollie-mega-menu__toggle[aria-expanded=\"true\"]) .menu-container__close-button {\n\topacity: 1;\n\tvisibility: visible;\n}\n\n@media (min-width: 600px) {\n\t// Hide close button when using hover mode\n\t.wp-block-navigation-item[data-wp-context*='\"showOnHover\": true'] {\n\t\t.menu-container__close-button {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n\n// Change the position of the menu depending on the menu alignment (override Navigation block).\n.wp-block-navigation { \n    .wp-block-ollie-mega-menu__menu-container {\n        &.menu-justified-left {\n            left: 0;\n            right: unset;\n        }\n\n        &.menu-justified-right {\n            left: unset;\n            right: 0;\n        }\n\n        &.menu-justified-center {\n            right: unset;\n\n            &.menu-width-content {\n                left: calc( ( -1 * var(--wp--style--global--content-size) / 2 ) + 50% );\n            }\n        }\n    }\n}\n\n// If there is a collapsed link, start hidden.\n.wp-block-navigation__responsive-container:not(.is-menu-open) {\n\t.wp-block-ollie-mega-menu__collapsed-link {\n\t\tdisplay: none;\n\t}\n}\n\n// If a navigation modal is open, check if the mega menu should be displayed.\n.wp-block-navigation__responsive-container.is-menu-open {\n    .wp-block-ollie-mega-menu {\n        &.disable-menu-when-collapsed {\n            &:not(.has-collapsed-link) {\n                display: none;\n            }\n    \n            .wp-block-ollie-mega-menu__collapsed-link {\n                display: inherit;\n            }\n    \n            .wp-block-ollie-mega-menu__toggle, \n            .wp-block-ollie-mega-menu__menu-container {\n                display: none;\n            }\n        }\n    }\n\n\t.wp-block-ollie-mega-menu__menu-container {\n\t\tposition: fixed;\n\t\ttop: 0 !important;\n\t\tleft: 0 !important;\n\t\twidth: 100% !important;\n\t\theight: 100% !important;\n\t\tz-index: 100;\n\t\topacity: 1;\n\t\toverflow-x: hidden !important;\n\t\toverflow-y: scroll !important;\n\t}\n}\n","// Editor specific styles.\n.ollie-mega-menu__layout-panel {\n    .components-h-stack {\n        .components-base-control,\n\t\t.components-toggle-group-control,\n\t\t.components-base-control__field {\n            margin-bottom: 0;\n        }\n    }\n\n    // When justification is disabled for wide/full width\n    .block-editor-hooks__flex-layout-justification-controls.is-disabled {\n        // Apply opacity to left and right options\n        &> div:first-child,\n        &> div:last-child {\n            opacity: 0.5;\n            cursor: not-allowed;\n        }\n    }\n}\n\n.ollie-mega-menu__layout-help {\n\tfont-size: 12px;\n\tcolor: rgb(117, 117, 117);\n\tmargin-top: 8px !important;\n}\n\n.menu-designer-guide {\n\twidth: 800px;\n\tmax-height: none !important;\n\n\t.components-modal__header .components-button:hover svg {\n\t\tfill: currentColor;\n\t}\n\n\t.components-guide__container {\n\t\tpadding: 40px;\n\t}\n\n\th2 + p {\n\t\tmargin-top: 0;\n\t}\n\n\t.menu-designer-guide-video {\n\t\tposition: relative;\n\t\tpadding-bottom: 56.25%;\n\t\theight: 0;\n\t\toverflow: hidden;\n\t\tmax-width: 100%;\n\t\tmargin-top: 10px;\n\t\tborder-radius: 8px;\n\n\t\tiframe {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t}\n\t}\n\n\t.components-guide__page-control {\n\t\torder: 10;\n\t\tdisplay: none;\n\t}\n\n\t.components-guide__footer {\n\t\tmargin-bottom: 0;\n\t\tmargin-top: 30px;\n\t}\n\n\t.components-guide__forward-button,\n\t.components-guide__finish-button {\n\t\tright: 0;\n\t}\n\n\t.components-guide__back-button {\n\t\tleft: 0;\n\t}\n}\n\n.menu-designer-guide-buttons {\n\tmargin-bottom: 16px;\n\tbackground: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, #0000);\n\tpadding: 3px 0px 3px 10px;\n\tborder-radius: 5px;\n\n\tbutton.components-button:first-child {\n\t\tpadding-left: 0;\n\t\tgap: 8px;\n\t\ttext-decoration: none;\n\t\tjustify-content: start !important;\n\n\t\t&:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}