{"version":3,"sources":["webpack:///./src/components/layout/NavigationMain.vue?4392","webpack:///./src/components/layout/NavigationMainLevel.vue?ff05","webpack:///src/components/layout/NavigationMainLevel.vue","webpack:///./src/components/layout/NavigationMainLevel.vue?a5d5","webpack:///./src/components/layout/NavigationMainLevel.vue?189f","webpack:///./src/components/layout/NavigationMainLevel.vue?ef59","webpack:///./src/components/layout/NavigationMain.vue?ec15","webpack:///src/components/layout/NavigationMain.vue","webpack:///./src/components/layout/NavigationMain.vue?891b","webpack:///./src/components/layout/NavigationMain.vue?6850"],"names":["render","_vm","this","_h","$createElement","_c","_self","class","levelCount","directives","name","rawName","value","$slots","expression","_t","staticRenderFns","props","level","type","Number","default","data","component","staticClass","menu","isExpandable","state","ref","attrs","on","menuToggle","transition","scopedSlots","_u","key","fn","proxy","_e","hideSearch","searchToggle","search","translations","searchoptions","closeSearch","slotProps","queryString","components","NavigationMainLevel","Boolean","Object","transitionTimeout","methods","menuSetExpandable","$refs","offsetParent","clearTimeout","setTimeout","undefined","$root","$emit","onEscape","e","created","window","addEventListener","mounted","$nextTick","beforeDestroy","removeEventListener"],"mappings":"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","file":"js/chunk-53f7fd60.30e4068b.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./NavigationMain.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['level', (\"level-\" + _vm.levelCount)]},[_c('ul',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.$slots.default),expression:\"$slots.default\"}]},[_vm._t(\"default\")],2),_vm._t(\"metanavigation\")],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div :class=\"['level', `level-${levelCount}`]\">\r\n    <ul v-show=\"$slots.default\">\r\n      <slot/>\r\n    </ul>\r\n\r\n    <slot name=\"metanavigation\"/>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'MainNavigationLevel',\r\n  props: {\r\n    level: {\r\n      type: Number,\r\n      default: 0\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      levelCount: this.level + 1\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n// desktop\r\n$level-padding-y: 0 !default;\r\n$level-padding-x: 0 !default;\r\n\r\n$level-1-bg: transparent !default;\r\n\r\n$level-2-padding-y: $spacer * 2.5 !default;\r\n$level-2-padding-x: 0 !default;\r\n$level-2-min-height: 0 !default;\r\n$level-2-max-height: 60vh !default;\r\n$level-2-bg: #fbfafa !default;\r\n$level-2-border-width: 2px !default;\r\n$level-2-border-color: $primary !default;\r\n\r\n$level-3-padding-y: 0 !default;\r\n$level-3-padding-x: 0 !default;\r\n\r\n// mobile\r\n$level-mobile-breakpoint: $mobile-breakpoint !default;\r\n\r\n$level-mobile-padding-y: $spacer * 1.5 !default;\r\n$level-mobile-padding-x: $spacer * 1.5 !default;\r\n\r\n$level-1-mobile-top-offset: $mainnavigation-mobile-height !default;\r\n$level-1-mobile-bg: $level-2-bg !default;\r\n\r\n$level-2-mobile-padding-y: $level-mobile-padding-y * 0.5 !default;\r\n$level-2-mobile-padding-x: $level-mobile-padding-x !default;\r\n$level-2-mobile-min-height: 0 !default;\r\n$level-2-mobile-max-height: none !default;\r\n$level-2-mobile-bg: transparent !default;\r\n$level-2-mobile-border: 0 none !default;\r\n\r\n$level-3-mobile-padding-y: $level-2-mobile-padding-y !default;\r\n$level-3-mobile-padding-x: $level-2-mobile-padding-x !default;\r\n\r\n.mainnavigation {\r\n  .mainnavigation-menu {\r\n    .level {\r\n      > ul {\r\n        @include list-unstyled();\r\n        margin: 0;\r\n        padding: $level-padding-y $level-padding-x;\r\n      }\r\n\r\n      &.level-1 {\r\n        background-color: $level-1-bg;\r\n\r\n        > ul {\r\n          display: flex;\r\n          justify-content: flex-end;\r\n        }\r\n      }\r\n\r\n      &.level-2 {\r\n        position: absolute;\r\n        top: 100%;\r\n        left: 50%;\r\n        overflow: hidden;\r\n        overflow-y: auto;\r\n        width: 100vw;\r\n        min-height: $level-2-min-height;\r\n        max-height: $level-2-max-height;\r\n        transform: translateX(-50%);\r\n        background-color: $level-2-bg;\r\n        border-bottom: $level-2-border-width solid $level-2-border-color;\r\n        box-shadow: 0 10px 25px 0 rgba($yellow, 0.05);\r\n\r\n        > ul {\r\n          @include make-container();\r\n          @include make-container-max-widths();\r\n          padding: $level-2-padding-y $level-2-padding-x;\r\n        }\r\n      }\r\n\r\n      &.level-3 {\r\n        padding: $level-3-padding-y $level-3-padding-x;\r\n      }\r\n    }\r\n\r\n    @include media-breakpoint-down($level-mobile-breakpoint) {\r\n      .level {\r\n        > ul {\r\n          padding: $level-mobile-padding-y $level-mobile-padding-x;\r\n        }\r\n\r\n        &.level-1 {\r\n          position: fixed;\r\n          top: 0;\r\n          bottom: 0;\r\n          left: 0;\r\n          right: 0;\r\n          overflow: hidden;\r\n          overflow-y: auto;\r\n          margin-top: $level-1-mobile-top-offset;\r\n          background-color: $level-1-mobile-bg;\r\n          z-index: -1;\r\n\r\n          > ul {\r\n            display: block;\r\n            @include make-container();\r\n            @include make-container-max-widths();\r\n          }\r\n        }\r\n\r\n        &.level-2 {\r\n          position: static;\r\n          overflow: auto;\r\n          width: auto;\r\n          min-height: $level-2-mobile-min-height;\r\n          max-height: $level-2-mobile-max-height;\r\n          transform: none;\r\n          background-color: $level-2-mobile-bg;\r\n          border-bottom: $level-2-mobile-border;\r\n          box-shadow: none;\r\n\r\n          > ul {\r\n            margin-right: auto;\r\n            padding: $level-2-mobile-padding-y $level-2-mobile-padding-x;\r\n            max-width: none;\r\n          }\r\n        }\r\n\r\n        &.level-3 {\r\n          > ul {\r\n            padding: $level-3-mobile-padding-y $level-3-mobile-padding-x;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./NavigationMainLevel.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./NavigationMainLevel.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./NavigationMainLevel.vue?vue&type=template&id=7387d066&\"\nimport script from \"./NavigationMainLevel.vue?vue&type=script&lang=js&\"\nexport * from \"./NavigationMainLevel.vue?vue&type=script&lang=js&\"\nimport style0 from \"./NavigationMainLevel.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./NavigationMainLevel.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:\"mainnavigation\"},[_c('div',{staticClass:\"mainnavigation-logo\"},[_vm._t(\"logo\")],2),_c('div',{class:['mainnavigation-menu', { 'is-expanded': _vm.menu.isExpandable && _vm.menu.state }]},[_c('b-button',{ref:\"menuToggle\",staticClass:\"menu-toggle\",attrs:{\"variant\":\"link\"},on:{\"click\":_vm.menuToggle}},[_c('div',{staticClass:\"toggle-burger\"},[_c('div',{staticClass:\"burger-patty\"}),_c('div',{staticClass:\"burger-patty\"})])]),_c('transition',{attrs:{\"name\":_vm.menu.transition}},[(!_vm.menu.isExpandable || (_vm.menu.isExpandable && _vm.menu.state))?_c('navigation-main-level',{scopedSlots:_vm._u([{key:\"metanavigation\",fn:function(){return [_vm._t(\"mobile-metanavigation\")]},proxy:true}],null,true)},[_vm._t(\"menu\")],2):_vm._e()],1)],1),_vm._t(\"pack-shot-list\"),_vm._t(\"basket\"),(!_vm.hideSearch)?_c('div',{staticClass:\"mainnavigation-search\"},[_c('b-button',{staticClass:\"search-toggle\",attrs:{\"variant\":\"link\"},on:{\"click\":_vm.searchToggle}},[_c('b-icon',{attrs:{\"icon\":\"search\"}})],1),_c('transition',{attrs:{\"name\":\"search\"}},[(_vm.search.state)?_c('div',{staticClass:\"search-control\"},[_c('header-search',{attrs:{\"translations\":_vm.translations,\"use-i18n\":true,\"searchoptions\":_vm.searchoptions},on:{\"close-search\":_vm.closeSearch},scopedSlots:_vm._u([{key:\"showmoreproducts\",fn:function(slotProps){return [_vm._t(\"searchshowmoreproducts\",null,null,{ queryString: slotProps.queryString })]}},{key:\"showmoremarketingproducts\",fn:function(slotProps){return [_vm._t(\"searchshowmoremarketingproducts\",null,null,{ queryString: slotProps.queryString })]}},{key:\"showmorecontent\",fn:function(slotProps){return [_vm._t(\"searchshowmorecontent\",null,null,{ queryString: slotProps.queryString })]}},{key:\"showmoreeducation\",fn:function(slotProps){return [_vm._t(\"searchshowmoreeducation\",null,null,{ queryString: slotProps.queryString })]}}],null,true)},[_vm._t(\"default\",[_c('b-button',{staticClass:\"search-toggle ml-2\",attrs:{\"variant\":\"link\"},on:{\"click\":_vm.searchToggle}},[_c('b-icon',{attrs:{\"icon\":\"close\"}})],1)])],2)],1):_vm._e()])],1):_vm._e()],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <nav class=\"mainnavigation\">\r\n    <div class=\"mainnavigation-logo\">\r\n      <slot name=\"logo\"/>\r\n    </div>\r\n\r\n    <div :class=\"['mainnavigation-menu', { 'is-expanded': menu.isExpandable && menu.state }]\">\r\n      <b-button variant=\"link\" class=\"menu-toggle\" ref=\"menuToggle\" @click=\"menuToggle\">\r\n        <div class=\"toggle-burger\">\r\n          <div class=\"burger-patty\"></div>\r\n          <div class=\"burger-patty\"></div>\r\n        </div>\r\n      </b-button>\r\n\r\n      <transition :name=\"menu.transition\">\r\n        <navigation-main-level v-if=\"!menu.isExpandable || (menu.isExpandable && menu.state)\">\r\n          <slot name=\"menu\"/>\r\n\r\n          <template #metanavigation>\r\n            <slot name=\"mobile-metanavigation\"/>\r\n          </template>\r\n        </navigation-main-level>\r\n      </transition>\r\n    </div>\r\n\r\n    <slot name=\"pack-shot-list\"/>\r\n    <slot name=\"basket\"/>\r\n\r\n    <div v-if=\"!hideSearch\" class=\"mainnavigation-search\">\r\n      <b-button class=\"search-toggle\" variant=\"link\" @click=\"searchToggle\"><b-icon icon=\"search\"/></b-button>\r\n\r\n      <transition name=\"search\">\r\n        <div v-if=\"search.state\" class=\"search-control\">\r\n          <header-search @close-search=\"closeSearch\" :translations=\"translations\" :use-i18n=\"true\" :searchoptions=\"searchoptions\">\r\n            <slot>\r\n              <b-button class=\"search-toggle ml-2\" variant=\"link\" @click=\"searchToggle\"><b-icon icon=\"close\"/></b-button>\r\n            </slot>\r\n            <template #showmoreproducts=\"slotProps\">\r\n              <slot name=\"searchshowmoreproducts\" v-bind=\"{ queryString: slotProps.queryString }\"/>\r\n            </template>\r\n            <template #showmoremarketingproducts=\"slotProps\">\r\n              <slot name=\"searchshowmoremarketingproducts\" v-bind=\"{ queryString: slotProps.queryString }\"/>\r\n            </template>\r\n            <template #showmorecontent=\"slotProps\">\r\n              <slot name=\"searchshowmorecontent\" v-bind=\"{ queryString: slotProps.queryString }\"/>\r\n            </template>\r\n            <template #showmoreeducation=\"slotProps\">\r\n              <slot name=\"searchshowmoreeducation\" v-bind=\"{ queryString: slotProps.queryString }\"/>\r\n            </template>\r\n          </header-search>\r\n        </div>\r\n      </transition>\r\n    </div>\r\n  </nav>\r\n</template>\r\n\r\n<script>\r\nimport NavigationMainLevel from '@/components/layout/NavigationMainLevel'\r\n\r\nexport default {\r\n  name: 'MainNavigation',\r\n  components: {\r\n    NavigationMainLevel\r\n  },\r\n  props: {\r\n    hideSearch: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    searchoptions: {\r\n      type: Object,\r\n      default: () => ({})\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      menu: {\r\n        isExpandable: false,\r\n        state: false,\r\n        transition: null,\r\n        transitionTimeout: null\r\n      },\r\n      search: {\r\n        state: false,\r\n        value: ''\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    menuSetExpandable () {\r\n      this.menu.transition = ''\r\n      this.menu.isExpandable = this.$refs.menuToggle && this.$refs.menuToggle.offsetParent !== null\r\n\r\n      if (this.menu.transitionTimeout) clearTimeout(this.menu.transitionTimeout)\r\n      this.menu.transitionTimeout = setTimeout(() => { this.menu.transition = 'navigation' }, 500)\r\n    },\r\n    menuToggle (e, state) {\r\n      this.menu.state = state !== undefined ? state : !this.menu.state\r\n      this.$root.$emit('scrollbar:toggle', { key: this.$options.name, state: this.menu.state, till: this.$root.mobile.down.pixel })\r\n    },\r\n    searchToggle (e, state) {\r\n      this.search.state = state !== undefined ? state : !this.search.state\r\n    },\r\n    closeSearch () {\r\n      this.search.state = false\r\n    },\r\n    onEscape (e) {\r\n      if (e.key === 'Escape') {\r\n        this.menuToggle(e, false)\r\n        this.searchToggle(e, false)\r\n      }\r\n    }\r\n  },\r\n  created () {\r\n    window.addEventListener('resize', this.menuSetExpandable)\r\n    window.addEventListener('keydown', this.onEscape)\r\n  },\r\n  mounted () {\r\n    this.$nextTick(this.menuSetExpandable)\r\n  },\r\n  beforeDestroy () {\r\n    window.removeEventListener('resize', this.menuSetExpandable)\r\n    window.removeEventListener('keydown', this.onEscape)\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n// .hover and .active state for desktop viewport is managed in NavigationMainLevelItem.vue\r\n\r\n// desktop\r\n$mainnavigation-padding-y: 0 !default;\r\n$mainnavigation-padding-x: $component-padding-x !default;\r\n$mainnavigation-inner-gap: $spacer !default;\r\n$mainnavigation-height: 90px !default;\r\n\r\n$mainnavigation-logo-width: 110px !default;\r\n\r\n$mainnavigation-search-control-bg: $body-bg !default;\r\n$mainnavigation-search-control-transition-in-duration: 300ms !default;\r\n$mainnavigation-search-control-transition-in: all cubic-bezier(0.35, 0.05, 0.4, 1.25) $mainnavigation-search-control-transition-in-duration !default;\r\n$mainnavigation-search-control-transition-out-duration: 200ms !default;\r\n$mainnavigation-search-control-transition-out: all cubic-bezier(0.35, 0.05, 0.4, 1) $mainnavigation-search-control-transition-out-duration !default;\r\n\r\n// mobile\r\n$mainnavigation-mobile-breakpoint: $mobile-breakpoint !default;\r\n\r\n$mainnavigation-mobile-padding-y: 0 !default;\r\n$mainnavigation-mobile-padding-x: 0 !default;\r\n$mainnavigation-mobile-inner-gap: 0 !default;\r\n$mainnavigation-mobile-height: 50px !default;\r\n\r\n$mainnavigation-mobile-logo-width: 72px !default;\r\n\r\n$mainnavigation-mobile-toggle-burger-size: $spacer !default;\r\n$mainnavigation-mobile-toggle-burger-patty-gap: 6px !default;\r\n$mainnavigation-mobile-toggle-burger-patty-height: 2px !default;\r\n$mainnavigation-mobile-toggle-burger-patty-bg: $primary !default;\r\n$mainnavigation-mobile-toggle-burger-patty-border-radius: $mainnavigation-mobile-toggle-burger-patty-height !default;\r\n$mainnavigation-mobile-toggle-burger-patty-transition-in: all cubic-bezier(0.35, 0.05, 0.4, 1.5) 500ms !default;\r\n$mainnavigation-mobile-toggle-burger-patty-transition-out: all cubic-bezier(0.35, 0.05, 0.4, 1.5) 200ms !default;\r\n\r\n$mainnavigation-mobile-navigation-transition-in-duration: 400ms !default;\r\n$mainnavigation-mobile-navigation-transition-in: transform cubic-bezier(0.35, 0.05, 0.4, 1) $mainnavigation-mobile-navigation-transition-in-duration, opacity ease-in ($mainnavigation-mobile-navigation-transition-in-duration - 50ms) 50ms !default;\r\n$mainnavigation-mobile-navigation-transition-out-duration: 250ms !default;\r\n$mainnavigation-mobile-navigation-transition-out: transform cubic-bezier(0.35, 0.05, 0.4, 1) $mainnavigation-mobile-navigation-transition-out-duration, opacity ease-out ($mainnavigation-mobile-navigation-transition-out-duration - 50ms) !default;\r\n\r\n.mainnavigation {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  position: relative;\r\n  margin-left: $mainnavigation-inner-gap * -1;\r\n  margin-right: $mainnavigation-inner-gap * -1;\r\n  padding: $mainnavigation-padding-y $mainnavigation-padding-x;\r\n  height: $mainnavigation-height;\r\n  z-index: 1;\r\n\r\n  > * {\r\n    padding-left: $mainnavigation-inner-gap;\r\n    padding-right: $mainnavigation-inner-gap;\r\n    &.header-basket{\r\n      padding-left:0;\r\n    }\r\n    &.packshot-basket{\r\n      padding:0;\r\n    }\r\n  }\r\n\r\n  .btn {\r\n    box-shadow: none;\r\n  }\r\n\r\n  .mainnavigation-logo {\r\n    .logo {\r\n      display: block;\r\n      width: $mainnavigation-logo-width;\r\n\r\n      svg,\r\n      img {\r\n        display: block;\r\n        margin: 0;\r\n        width: 100%;\r\n        max-width: none;\r\n        height: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  .mainnavigation-menu {\r\n    flex: 1 0 auto;\r\n\r\n    .menu-toggle {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  .mainnavigation-search {\r\n    .search-control {\r\n      position: absolute;\r\n      top: -50%;\r\n      transform: translateY(50%);\r\n      bottom: 0;\r\n      left: calc(#{$mainnavigation-padding-x} + #{$mainnavigation-inner-gap * 2} + #{$mainnavigation-logo-width});\r\n      right: $mainnavigation-inner-gap;\r\n      margin-top: 2px;\r\n      margin-bottom: 2px;\r\n\r\n      &.search-enter {\r\n        > div {\r\n          transform: scale(0);\r\n        }\r\n      }\r\n\r\n      &.search-enter-active {\r\n        transition: all linear $mainnavigation-search-control-transition-in-duration;\r\n\r\n        > div {\r\n          transition: $mainnavigation-search-control-transition-in;\r\n        }\r\n      }\r\n\r\n      &.search-enter-to {\r\n        > div {\r\n          transform: scale(1);\r\n        }\r\n      }\r\n\r\n      &.search-leave {\r\n        > div {\r\n          opacity: 1;\r\n          transform: scale(1);\r\n        }\r\n      }\r\n\r\n      &.search-leave-active {\r\n        transition: all linear $mainnavigation-search-control-transition-out-duration;\r\n\r\n        > div {\r\n          transition: $mainnavigation-search-control-transition-out;\r\n        }\r\n      }\r\n\r\n      &.search-leave-to {\r\n        > div {\r\n          opacity: 0;\r\n          transform: scale(0);\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .header-basket + .mainnavigation-search {\r\n    padding-left: 0;\r\n\r\n    .search-toggle {\r\n      padding-left: 0;\r\n    }\r\n  }\r\n\r\n  @include media-breakpoint-down($mainnavigation-mobile-breakpoint) {\r\n    margin-left: $mainnavigation-mobile-inner-gap * -1;\r\n    margin-right: $mainnavigation-mobile-inner-gap * -1;\r\n    padding: $mainnavigation-mobile-padding-y $mainnavigation-mobile-padding-x;\r\n    height: $mainnavigation-mobile-height;\r\n\r\n    > * {\r\n      padding-left: $mainnavigation-mobile-inner-gap;\r\n      padding-right: $mainnavigation-mobile-inner-gap;\r\n    }\r\n\r\n    .mainnavigation-logo {\r\n      flex: 1 0 auto;\r\n      order: 2;\r\n\r\n      .logo {\r\n        margin: auto;\r\n        width: auto;\r\n        max-width: $mainnavigation-mobile-logo-width;\r\n      }\r\n    }\r\n\r\n    .mainnavigation-menu {\r\n      flex: 0 1 auto;\r\n      order: 3;\r\n\r\n      .menu-toggle {\r\n        display: block;\r\n        padding-right: 0;\r\n\r\n        .toggle-burger {\r\n          position: relative;\r\n          width: $mainnavigation-mobile-toggle-burger-size;\r\n          height: $mainnavigation-mobile-toggle-burger-size;\r\n\r\n          .burger-patty {\r\n            position: absolute;\r\n            top: 0;\r\n            bottom: 0;\r\n            left: 0;\r\n            right: 0;\r\n            margin: auto 0 auto auto;\r\n            height: $mainnavigation-mobile-toggle-burger-patty-height;\r\n            background-color: $mainnavigation-mobile-toggle-burger-patty-bg;\r\n            border-radius: $mainnavigation-mobile-toggle-burger-patty-border-radius;\r\n            transition: $mainnavigation-mobile-toggle-burger-patty-transition-out;\r\n\r\n            &:nth-child(1) {\r\n              width: 100%;\r\n              transform: translateY(-$mainnavigation-mobile-toggle-burger-patty-gap * 0.5) rotate(0deg);\r\n            }\r\n\r\n            &:nth-child(2) {\r\n              width: 60%;\r\n              transform: translateY($mainnavigation-mobile-toggle-burger-patty-gap * 0.5) rotate(0deg);\r\n            }\r\n          }\r\n        }\r\n      }\r\n\r\n      > .level {\r\n        &.navigation-enter {\r\n          opacity: 0;\r\n          transform: translateX(-50%);\r\n        }\r\n\r\n        &.navigation-enter-active {\r\n          transition: $mainnavigation-mobile-navigation-transition-in;\r\n        }\r\n\r\n        &.navigation-enter-to {\r\n          opacity: 1;\r\n          transform: translateX(0%);\r\n        }\r\n\r\n        &.navigation-leave {\r\n          opacity: 1;\r\n          transform: translateX(0%);\r\n        }\r\n\r\n        &.navigation-leave-active {\r\n          transition: $mainnavigation-mobile-navigation-transition-out;\r\n        }\r\n\r\n        &.navigation-leave-to {\r\n          opacity: 0;\r\n          transform: translateX(-50%);\r\n        }\r\n      }\r\n\r\n      &.is-expanded {\r\n        .menu-toggle {\r\n          .toggle-burger {\r\n            .burger-patty {\r\n              transition: $mainnavigation-mobile-toggle-burger-patty-transition-in;\r\n\r\n              &:nth-child(1) {\r\n                width: 100%;\r\n                transform: rotate(-135deg);\r\n              }\r\n\r\n              &:nth-child(2) {\r\n                width: 100%;\r\n                transform: rotate(135deg);\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    .mainnavigation-search {\r\n      order: 1;\r\n\r\n      .search-control {\r\n        left: $mainnavigation-mobile-inner-gap;\r\n        right: $mainnavigation-mobile-inner-gap;\r\n\r\n        > div {\r\n          padding-left: 0;\r\n          padding-right: 0;\r\n          transform-origin: left center;\r\n\r\n          .input-group {\r\n            order: 2;\r\n\r\n            .input-group-append {\r\n              .btn {\r\n                &:last-child {\r\n                  padding-right: 0;\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    .header-basket + .mainnavigation-search {\r\n      padding-left: $input-btn-padding-x * 0.5;\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./NavigationMain.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./NavigationMain.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./NavigationMain.vue?vue&type=template&id=60e4d19e&\"\nimport script from \"./NavigationMain.vue?vue&type=script&lang=js&\"\nexport * from \"./NavigationMain.vue?vue&type=script&lang=js&\"\nimport style0 from \"./NavigationMain.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}