@include export-module('co-catalog-navigation-layout') {
  .co-catalog-navigation {
    font-family: $co-catalog-navigation-font-family;
    font-size: $co-catalog-navigation-font-size;
    color: $co-catalog-navigation-font-color;
    margin: $co-catalog-navigation-margin;
    background: #f5f5fce0;
    padding: 10px 15px;
    .home-link {
      font-family: $co-catalog-navigation-home-font-family;
      font-size: $co-catalog-navigation-home-font-size;
      font-weight: $co-catalog-navigation-home-font-weight;
    }
    .navigation-wrapper {
      display: flex;
      align-items: center;
      column-gap: 15px;
    }
    .navigation-item-wrapper {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 7px;
      span {
        font-weight: 600;
        font-size: 14px;
      }
      co-icon {
        width: 22px;
        height: 22px;
        &.collection {
          width: 18px;
          height: 18px;
        }
        svg {
          fill: #484f60;
        }
      }
      .home-link {
        margin-right: 15px;
      }
    }
    .navigation-overlay-wrapper {
      position: fixed;
      left: 0;
      display: flex;
      overflow: hidden;
      background: white;
      z-index: 9999;
      padding: $co-catalog-navigation-padding;
      column-gap: $co-catalog-navigation-column-gap;
      box-shadow: $co-catalog-navigation-box-shadow;
      width: 100%;
      max-height: $co-catalog-navigation-max-height;
      overflow-y: auto;
      flex-wrap: wrap;
    }
    .navigation-category {
      cursor: pointer;
      font-family: $co-catalog-navigation-category-font-family;
      font-size: $co-catalog-navigation-category-font-size;
      font-weight: $co-catalog-navigation-category-font-weight;
      border-style: $co-catalog-navigation-category-border-style;
      border-width: $co-catalog-navigation-category-border-width;
      border-color: $co-catalog-navigation-category-border-color;
      margin: $co-catalog-navigation-category-margin;
      padding: $co-catalog-navigation-category-padding;
      &:hover {
        color: $co-catalog-navigation-category-hover-color;
      }
    }
    .navigation-turnovergroup-wrapper {
      display: flex;
      flex-direction: column;
      row-gap: $co-catalog-navigation-turnovergroup-row-gap;
    }
    .navigation-turnovergroup {
      cursor: pointer;
      &:hover {
        color: $co-catalog-navigation-turnovergroup-hover-color;
      }
    }

    .navigation {
      .navigation-dropdown {
        position: fixed;
        //width: calc(100% - 60px);
        //top: calc(100% - 33px);
        //left: 30px;
        background: #fff;
        box-shadow: 0px 5px 5px 2px rgb(0 0 0 / 30%);
        overflow: hidden;
        visibility: hidden;
        z-index: 9;
        opacity: 0;
        //transform: translate(0, 10px);
        transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms ease-in;
        padding: 10px;
        max-height: 300px;
        width: auto;
        max-width: 100vw;
      }
      &:hover {
        .navigation-dropdown {
          visibility: visible;
          opacity: 1;
        }
      }
    }


    //*:focus{
    //  outline: none
    //}
    //
    //ul {
    //  list-style: none;
    //}
    //
    //a{
    //  text-decoration: none;
    //  cursor: pointer;
    //}
    //.component-wrapper {
    //  .header-wrapper {
    //    margin: 0 auto;
    //    position: relative;
    //    padding: 0 15px;
    //    width: 100%;
    //    .header {
    //      display: flex;
    //      flex-direction: row;
    //      justify-content: space-between;
    //      align-items: center;
    //      border-bottom: 1px solid #ececec;
    //      padding: 0 0 15px 0;
    //      .logo {
    //        img {
    //          max-height: 70px;
    //          max-width: 70px;
    //        }
    //      }
    //    }
    //  }
    //}
    //.navigation-container {
    //  background: #c8d8e6;
    //  text-align: center;
    //  font-size : 15px;
    //  min-height: 50px;
    //  width: 100%;
    //}
    //
    //.navigation-container.minified {
    //  min-height: 30px;
    //  font-size: 11px;
    //}
    //
    //.menu-toggle {
    //  cursor: pointer;
    //  border-radius: 5px;
    //  height: 40px;
    //  padding: 5px 20px 5px 5px;
    //  float: left;
    //  margin: 0;
    //  border: none;
    //  display: flex;
    //  background: #FFF;
    //}
    //
    //.menu-toggle span {
    //  line-height: 31px;
    //  display: inline-block;
    //  vertical-align: top;
    //  font-size: 15px;
    //}
    //
    //.menu-toggle .hamburger-icon {
    //  fill: #222!important;
    //  margin: 0 5px 0 0
    //}
    //
    //
    //.menu-close {
    //  position: absolute;
    //  right: 0;
    //  top: 0;
    //  height: 50px;
    //  width: 50px;
    //  background: transparent;
    //  color: #22313C;
    //  border: none;
    //  cursor: pointer;
    //  display: none;
    //}
    //
    //.navigation-container.minified .menu-toggle {
    //  height: 30px;
    //  padding: 0 20px 0 5px;
    //  font-size: 11px;
    //  margin: 0;
    //  border-radius: 0;
    //}
    //
    //.toggle-sub-menu {
    //  display: none;
    //  float: left;
    //  width: 50px;
    //  height: 40px;
    //  text-align: center;
    //  border: none;
    //  background: transparent;
    //  color: #5A6875;
    //  position: absolute;
    //  right: 0;
    //  top: 5px;
    //  padding: 0;
    //  cursor: pointer;
    //}
    //
    //.toggle-sub-menu co-icon {
    //  transition: 0.3s ease-in-out;
    //  width: 20px;
    //  height: 20px;
    //  margin: 5px 0 0;
    //}
    //
    //li.open > .toggle-sub-menu co-icon {
    //  transform: rotate(180deg);
    //}
    //
    //@media screen and (min-width: 941px) {
    //  .navigation {
    //    &:hover {
    //      .navigation-dropdown {
    //        //height: auto;
    //        //width: calc(100% - 60px);
    //        visibility: visible;
    //        opacity: 1;
    //      }
    //      .menu-toggle {
    //        background: #3E7EFF;
    //        color: #FFF;
    //        co-icon ::ng-deep {
    //          fill: #FFF !important;
    //          svg {
    //            fill: #FFF !important;
    //            g {
    //              fill: #FFF !important;
    //              path {
    //                fill: #FFF !important;
    //              }
    //            }
    //            rect:not(:first-child) {
    //              fill: #FFF !important;
    //            }
    //          }
    //        }
    //      }
    //    }
    //  }
    //  .navigation-container {
    //    background: #FFF;
    //    display: flex;
    //    align-items: center;
    //    gap: 20px;
    //    padding-left: 10px;
    //    .navigation-link {
    //      font-size: 16px;
    //      font-weight: 600;
    //    }
    //  }
    //  .menu-toggle {
    //    margin-left: 0px;
    //    border-radius: 0px;
    //    span {
    //      font-size: 16px;
    //      font-weight: 600;
    //    }
    //  }
    //  .navigation-dropdown {
    //    position: fixed;
    //    //width: calc(100% - 60px);
    //    //top: calc(100% - 33px);
    //    //left: 30px;
    //    background: #fff;
    //    box-shadow: 0px 5px 5px 2px rgb(0 0 0 / 30%);
    //    overflow: hidden;
    //    visibility: hidden;
    //    z-index: 9;
    //    opacity: 0;
    //    //transform: translate(0, 10px);
    //    transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms ease-in;
    //  }
    //  .navigation-menu {
    //    display: inline-block;
    //    text-align: left;
    //    margin: 0;
    //    padding: 0;
    //    background: #FFF;
    //    width: 100%;
    //  }
    //  .navigation-menu {
    //    > li {
    //      display: block;
    //      padding: 13px 30px;
    //      float: left;
    //      width: calc(100% /5);
    //      &.external-menu {
    //        width: calc(100% /8);
    //        height: 180px;
    //        position: relative;
    //        margin: 10px 0;
    //        a {
    //          align-items: center;
    //          height: 150px;
    //          font-size: 12px;
    //          color: #222;
    //          span {
    //            margin-top: 0px;
    //            display: block;
    //            position: absolute;
    //            bottom: 5px;
    //            width: 100%;
    //            text-align: center;
    //          }
    //          co-image {
    //            height: 100px;
    //            width: 100%;
    //          }
    //        }
    //        .no-image-wrapper {
    //          height: 100px;
    //          width: 100%;
    //          text-align: center;
    //          position: relative;
    //          background: #ececec;
    //          co-icon ::ng-deep {
    //            height: 100px;
    //            width: 100%;
    //            position: absolute;
    //            left: 0;
    //            top: 0;
    //            svg {
    //              max-height: 50px;
    //              position: absolute;
    //              top: 50%;
    //              left: 0;
    //              transform: translateY(-50%);
    //              rect, path {
    //                fill: #FFF;
    //              }
    //            }
    //          }
    //          span {
    //            color: #FFF;
    //          }
    //        }
    //      }
    //    }
    //  }
    //
    //  .navigation-menu > li > a {
    //    display: inline-block;
    //    line-height: 20px;
    //    border-bottom: 1px solid #ececec;
    //    position: relative;
    //    z-index: 12;
    //    width: 100%;
    //    font-size: 15px;
    //    padding-bottom: 10px;
    //    font-weight: 600;
    //    color: #222;
    //    span {
    //      font-size: 15px;
    //      font-weight: 600;
    //      color: #222;
    //    }
    //  }
    //
    //  .navigation-menu > li:hover > a {
    //    color: #3E7EFF;
    //    border-bottom: 1px solid #3E7EFF;
    //    z-index: 12;
    //    text-decoration: none;
    //    span {
    //      color: #3E7EFF;
    //    }
    //  }
    //
    //  .navigation-menu > li > ul {
    //    padding-left: 0px;
    //    padding-top: 15px;
    //  }
    //
    //
    //  .navigation-menu > li > ul > li {
    //    padding: 3px;
    //    margin: 0;
    //  }
    //
    //  .navigation-menu > li > ul > li > a {
    //    line-height: 24px;
    //    color: #22313C;
    //    font-size: 13px;
    //    font-weight: normal;
    //    span {
    //      color: #22313C;
    //      font-size: 13px;
    //      font-weight: normal;
    //    }
    //  }
    //
    //  .navigation-menu > li > ul > li > a:hover {
    //    color: #3E7EFF;
    //    text-decoration: underline;
    //    span {
    //      color: #3E7EFF;
    //    }
    //  }
    //
    //  .navigation-menu > li > ul ul {
    //    display: none
    //  }
    //
    //  .navigation-container.minified .navigation-menu {
    //    font-size: 13px;
    //  }
    //
    //  .navigation-container.minified .navigation-menu > li {
    //    padding: 7px 10px;
    //  }
    //
    //  .navigation-container.minified .navigation-menu > li > a {
    //    line-height: 16px;
    //  }
    //
    //  .navigation-container.minified .navigation-menu > li > ul {
    //    padding: 25px 30px;
    //  }
    //
    //  .navigation-container.minified .navigation-menu > li > ul > li > a {
    //    font-size: 13px;
    //    line-height: 24px;
    //  }
    //
    //}
    //
    //@media screen and (max-width: 940px) {
    //
    //  .menu-close,
    //  .menu-toggle{
    //    display: flex;
    //  }
    //
    //  .navigation-menu {
    //    position: absolute;
    //    left: 0;
    //    top: 0;
    //    background: #fff;
    //    margin: 0 0 0 -500px;
    //    overflow: auto;
    //    width: 350px;
    //    height: 100vh;
    //    max-width: 100%;
    //    text-align: left;
    //    padding: 50px 15px 30px;
    //    box-shadow: 1px 0 8px 0 rgba(72, 79, 96, 0.25);
    //    transition: 0.3s ease-in-out;
    //    font-size: 14px;
    //    box-sizing: border-box
    //  }
    //
    //  .navigation-dropdown.active .navigation-menu {
    //    margin: 0;
    //  }
    //
    //  .navigation-menu > li {
    //    display: block;
    //    width: 100%;
    //    margin: 0 0 15px;
    //    position: relative;
    //  }
    //
    //  .navigation-menu li.open > ul {
    //    display: block;
    //    height: auto !important;
    //  }
    //
    //  .navigation-menu > li > a {
    //    display: block;
    //    padding: 15px 20px;
    //    border: 1px solid #DCE4EA;
    //    border-radius: 5px;
    //    color: #22313C;
    //    position: relative;
    //  }
    //
    //  .navigation-menu li.open > a,
    //  .navigation-menu > li > a:hover {
    //    background: #c8d8e6;
    //  }
    //
    //  .navigation-menu > li ul {
    //    display: none;
    //    padding: 0 0 0 15px;
    //    margin: 0;
    //    font-size: 93%;
    //    margin: -1px 0 0;
    //  }
    //
    //  .navigation-menu > li ul li {
    //    display: block;
    //    width: 100%;
    //    margin: 5px 0;
    //  }
    //
    //  .navigation-menu > li ul li a {
    //    display: block;
    //    padding: 10px;
    //    color: #22313C;
    //    border: 1px solid #DCE4EA;
    //    border-radius: 5px;
    //    position: relative;
    //  }
    //
    //  .navigation-menu > li ul li a:hover {
    //    background: #DCE4EA;
    //  }
    //
    //  .toggle-sub-menu {
    //    display: block;
    //  }
    //
    //  .navigation-container.minified .navigation-menu {
    //    height: calc(100% - 30px);
    //    top: 30px;
    //  }
    //
    //}
    //@media screen and (max-width: 480px) {
    //  .navigation-menu {
    //    width: 100%;
    //  }
    //}
  }
}