.is-multiply {
  mix-blend-mode: multiply;
}

.vertical-shadow {
  -webkit-box-shadow: 0px 24px 16px -12px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 24px 16px -12px rgba(0,0,0,0.75);
  box-shadow: 0px 24px 16px -12px rgba(0,0,0,0.75);
}

// Special styles for nav entry if active
.nav-entry-active {
  background: @nenoHeaderConfigNavEntryActiveBackgroundColor;
}

// General style for elements
.navigation--entry {
  position: relative;
}

// Border radius for search
.search-bar--radius {
  border-radius: unit(@nenoHeaderConfigSearchBorderRadius, px) !important;
}

// General styles for navigation--entry
.navigation--entry {
  position: inherit;
  @media all and (min-width: 480px) {
    position: relative;
  }
}

// General styles for search bar
.entry--search {
  @media all and (min-width: 480px) {
    left: 0 !important;
  }
  @media all and (min-width: 768px) {
    left: 3% !important;
  }
}


// General color settings
.color {

  &-header {
    &--b {
      background: @nenoHeaderConfigBackgroundColor !important;
    }
  }

  &-main-nav {
    &--f {
      color: @nenoHeaderConfigMainNavFontColor;
    }
  }

  &-nav-shop-btn {
    &--b {
      background: @nenoHeaderConfigShopNavButtonBackgroundColor;
    }
  }

  &-top-bar-item {
    &--f {
      color: @nenoHeaderConfigTopBarFontColor !important;

      &:hover {
        color: @nenoHeaderConfigTopBarFontColorHover !important;
      }
    }
  }

  &-shop-nav-btn {
    &--b {
      background: @nenoHeaderConfigShopNavButtonBackgroundColor;
    }
  }

  &-shop-nav-btn {
    &--f {
      color: @nenoHeaderConfigShopNavButtonFontColor !important;
    }
  }

  &-nav-entry-active {
    &--f {
      color: @nenoHeaderConfigNavEntryActiveFontColor;
    }
  }

  &-search-bar {
    &--b {
      background: @nenoHeaderConfigSearchBarBackgroundColor !important;
    }
  }
}

// General margin settings
.margin {

  &-right {

    &--nav-entry {
      margin-right: unit(@nenoHeaderConfigNavEntryDistance, px);
    }
  }
}

// General padding settings
.padding {

  &-top {

    &--main-nav {
      padding-top: unit(@nenoHeaderConfigMainNavPaddingTop, px);
    }
  }

  &-bottom {

    &--main-nav {
      padding-bottom: unit(@nenoHeaderConfigMainNavPaddingBottom, px);
    }
  }
}

// General border settings
.border {

  &-all {

    &--shop-nav-btn {
      border: unit(@nenoHeaderConfigShopNavButtonBorderThickness, px) solid @nenoHeaderConfigShopNavButtonBorderColor;
      border-radius: unit(@nenoHeaderConfigShopNavButtonBorderRadius, px);
    }
  }

  &-left {

    &--nav-entry-active {
      border-left: unit(@nenoHeaderConfigNavEntryActiveBorderLeftThickness, px) solid @nenoHeaderConfigNavEntryActiveBorderLeftColor;
    }

    &--search-bar {
      border-left: unit(@nenoHeaderConfigSearchBarBorderLeftThickness, px) solid @nenoHeaderConfigSearchBarBorderLeftColor !important;
    }
  }

  &-top {

    &--nav-entry-active {
      border-top: unit(@nenoHeaderConfigNavEntryActiveBorderTopThickness, px) solid @nenoHeaderConfigNavEntryActiveBorderTopColor;
    }

    &--search-bar {
      border-top: unit(@nenoHeaderConfigSearchBarBorderTopThickness, px) solid @nenoHeaderConfigSearchBarBorderTopColor !important;
    }
  }

  &-right {

    &--nav-entry-active {
      border-right: unit(@nenoHeaderConfigNavEntryActiveBorderRightThickness, px) solid @nenoHeaderConfigNavEntryActiveBorderRightColor;
    }

    &--search-bar {
      border-right: unit(@nenoHeaderConfigSearchBarBorderRightThickness, px) solid @nenoHeaderConfigSearchBarBorderRightColor !important;
    }
  }

  &-bottom {

    &--header {
      border-bottom: unit(@nenoHeaderConfigBorderBottomThickness, px) solid @nenoHeaderConfigBorderBottomColor;
    }

    &--nav-entry-active {
      border-bottom: unit(@nenoHeaderConfigNavEntryActiveBorderBottomThickness, px) solid @nenoHeaderConfigNavEntryActiveBorderBottomColor;
    }

    &--search-bar {
      border-bottom: unit(@nenoHeaderConfigSearchBarBorderBottomThickness, px) solid @nenoHeaderConfigSearchBarBorderBottomColor !important;
    }
  }
}

//General alignment settings
.alignment {

  &--nav-list-wrapper {
    text-align: @nenoHeaderConfigNavEntryTextAlign;
  }
}

// General font-size settings
.font-size {
  &--nav-entry {
    font-size: unit(@nenoHeaderConfigNavEntryFontSize, px);
  }
}

// General focus settings (for inputs)
.focus {
  &--search-bar {
    &:focus {
      background: @nenoHeaderConfigSearchBarFocusBackgroundColor !important;
      border: unit(@nenoHeaderConfigSearchBarFocusBorderThickness, px) solid @nenoHeaderConfigSearchBarFocusBorderColor !important;
    }
  }
}

//General hover settings
.hover {

  &--shop-nav {

    &--background {
      background: @nenoHeaderConfigShopNavButtonBackgroundColor;
      transition: background unit(@nenoHeaderConfigShopNavButtonHoverTransition, s);

      &:hover {
        background: @nenoHeaderConfigShopNavButtonHoverBackgroundColor;
        transition: background unit(@nenoHeaderConfigShopNavButtonHoverTransition, s);
      }
    }

    &--font {
      color: @nenoHeaderConfigShopNavButtonFontColor !important;
      transition: color unit(@nenoHeaderConfigShopNavButtonHoverTransition, s);

      &:hover {
        color: @nenoHeaderConfigShopNavButtonHoverFontColor !important;
        transition: color unit(@nenoHeaderConfigShopNavButtonHoverTransition, s);

          i, span {
            color: @nenoHeaderConfigShopNavButtonHoverFontColor !important;
            transition: color unit(@nenoHeaderConfigShopNavButtonHoverTransition, s);
          }
      }
    }

    &--border {
      border: unit(@nenoHeaderConfigShopNavButtonBorderThickness, px) solid @nenoHeaderConfigShopNavButtonBorderColor !important;
      transition: border unit(@nenoHeaderConfigShopNavButtonHoverTransition, s);

      &:hover {
        border: unit(@nenoHeaderConfigShopNavButtonBorderThickness, px) solid @nenoHeaderConfigShopNavButtonHoverBorderColor !important;
        transition: border unit(@nenoHeaderConfigShopNavButtonHoverTransition, s);
      }
    }
  }

  &--nav-entry {

    &--background {
      background: none;
      transition: background unit(@nenoHeaderConfigNavEntryHoverTransition, s);

      &:hover {
        background: @nenoHeaderConfigNavEntryHoverBackgroundColor;
        transition: background unit(@nenoHeaderConfigNavEntryHoverTransition, s);
      }
    }

    &--font-color {
      .navigation--link span {
        color: @nenoHeaderConfigMainNavFontColor;
        transition: color unit(@nenoHeaderConfigNavEntryHoverTransition, s);
      }

      &:hover {
        .navigation--link span {
          color: @nenoHeaderConfigNavEntryHoverFontColor;
          transition: color unit(@nenoHeaderConfigNavEntryHoverTransition, s);
        }
      }
    }

    &--border-left {
      &:after {
        content: "";
        top: 0;
        pointer-events: none;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        border-left: unit(@nenoHeaderConfigNavEntryHoverBorderLeftThickness , px) solid @nenoHeaderConfigNavEntryHoverBorderLeftColor;
        opacity: 0;
        transition: opacity unit(@nenoHeaderConfigNavEntryHoverTransition, s);
        box-sizing: border-box;
      }
      &:hover {
        &:after {
          content: "";
          top: 0;
          pointer-events: none;
          left: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          border-left: unit(@nenoHeaderConfigNavEntryHoverBorderLeftThickness , px) solid @nenoHeaderConfigNavEntryHoverBorderLeftColor;
          opacity: 0;
          transition: opacity unit(@nenoHeaderConfigNavEntryHoverTransition, s);
          box-sizing: border-box;
        }
      }
    }

    &--border-top {
      &:after {
        content: "";
        top: 0;
        pointer-events: none;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        border-top: unit(@nenoHeaderConfigNavEntryHoverBorderTopThickness, px) solid @nenoHeaderConfigNavEntryHoverBorderTopColor;
        opacity: 0;
        transition: opacity unit(@nenoHeaderConfigNavEntryHoverTransition, s);
        box-sizing: border-box;
      }

      &:hover {
        &:after {
          content: "";
          top: 0;
          pointer-events: none;
          left: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          border-top: unit(@nenoHeaderConfigNavEntryHoverBorderTopThickness, px) solid @nenoHeaderConfigNavEntryHoverBorderTopColor;
          opacity: 0;
          transition: opacity unit(@nenoHeaderConfigNavEntryHoverTransition, s);
          box-sizing: border-box;
        }
      }
    }

    &--border-right {
      &:after {
        content: "";
        top: 0;
        pointer-events: none;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        border-right: unit(@nenoHeaderConfigNavEntryHoverBorderRightThickness, px) solid @nenoHeaderConfigNavEntryHoverBorderRightColor;
        opacity: 0;
        transition: opacity unit(@nenoHeaderConfigNavEntryHoverTransition, s);
        box-sizing: border-box;
      }

      &:hover {
        &:after {
          content: "";
          top: 0;
          pointer-events: none;
          left: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          border-right: unit(@nenoHeaderConfigNavEntryHoverBorderRightThickness, px) solid @nenoHeaderConfigNavEntryHoverBorderRightColor;
          opacity: 0;
          transition: opacity unit(@nenoHeaderConfigNavEntryHoverTransition, s);
          box-sizing: border-box;
        }
      }
    }

    &--border-bottom {
      &:after {
        content: "";
        top: 0;
        pointer-events: none;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        border-bottom: unit(@nenoHeaderConfigNavEntryHoverBorderBottomThickness, px) solid @nenoHeaderConfigNavEntryHoverBorderBottomColor;
        opacity: 0;
        transition: opacity unit(@nenoHeaderConfigNavEntryHoverTransition, s);
        box-sizing: border-box;
      }

      &:hover {
        &:after {
          content: "";
          top: 0;
          pointer-events: none;
          left: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          border-bottom: unit(@nenoHeaderConfigNavEntryHoverBorderBottomThickness, px) solid @nenoHeaderConfigNavEntryHoverBorderBottomColor;
          opacity: 1;
          transition: opacity unit(@nenoHeaderConfigNavEntryHoverTransition, s);
          box-sizing: border-box;
        }
      }
    }
  }
}