/// DO NO NOT change this ///
$include-core-component-menu: true;

@mixin menu {
  display: block;
  &.#{$menu-horizontal} {
    @include display-flex;
    width: 100%;
  }
  &, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  &.#{$menu-inside-absolute}, &.#{$menu-inside-fixed} {
    #{$menu-item} {
      position: relative;
    }
    .#{$menu-inside} {
      z-index: 1;
    }
  }
  &.#{$menu-inside-absolute} {
    .#{$menu-inside} {
      position: absolute;
      left: 0;
    }
  }
  &.#{$menu-inside-fixed} {
    .#{$menu-inside} {
      position: fixed;
    }
  }
  &.#{$text-center} {
    #{$menu-item-anchor} {
      @include justify-content(center);
    }
  }
  .#{$menu-inside} {
    list-style: none;
    display: none;
    &:hover {
      #{$menu-item-anchor} {
        @include menu-inside-hover();
      }
    }
  }
  #{$menu-item-anchor} {
    cursor: pointer;
    @include ellipsis;
    &:hover {
      ~ .#{$menu-inside} {
        display: block;
        #{$menu-item-anchor} {
          @include menu-inside-hover();
        }
      }
    }
    ~ .#{$menu-inside} {
      &:hover {
        display: block;
      }
    }
  }
  #{$menu-item} {
    display: block;
    &:last-child {
      border-bottom: 0;
    }
    #{$menu-item-anchor} {
      display: block;
    }
  }
}

#{$menu} {
  @include menu;
  &.#{$popup} {
    border: 0 none;
  }
  #{$menu-item} {
    &.#{$active} {
      @include menu-item-active-block;
    }
    &:hover {
      #{$menu-item-anchor} {
        @include menu-item-hover-block;
      }
    }
  }
  #{$menu-item-anchor} {
    &:focus {
      @include menu-item-anchor-focus-block;
    }
  }
  &.#{$menu-horizontal} {
    @include display-flex;
    &.#{$menu-wrap} {
      @include flex-wrap(wrap);
    }
    &:not(.#{$menu-wrap}) {
      #{$menu-item} {
        @include display-flex;
        @include flex(1 1 auto);
        min-width: 0;
      }
    }
    #{$menu-item-anchor} {
      &:focus {
        @include menu-item-anchor-focus-block;
      }
    }
    #{$menu-item} {
      #{$menu-item-anchor} {
        @include display-flex;
        @include flex(1 1 auto);
        @include align-items(center);
        min-width: 0;
        [class^="#{$icon}-"], [class*=" #{$icon}-"] {
          @include flex(0 0 auto);
          min-width: 0;
        }
        span {
          @include flex(1 1 auto);
          min-width: 0;
          @include ellipsis; 
        }
        &:not(.#{$button}) {
          border-top: 0 none;
        }
      }
      + #{$menu-item} {
        #{$menu-item-anchor} {
          &:not(.#{$button}) {
            border-left: $menu-item-anchor-border;
          }
        }
      }
    }
    &.#{$menu-auto-width} {
      #{$menu-item} {
        width: auto;
        @include flex(0 0 auto);
      }
    }
  }
}

@media (min-width: ($mobile-menu-max-width + 1px)) {
  .#{$menu-mobile} {
    #{$menu-item} {
      #{$menu-item-anchor} {
        cursor: pointer;
        color: $menu-item-anchor-color;
        text-decoration: $menu-item-anchor-decoration;
        &:focus {
          @include menu-item-anchor-focus-inline;
        }
      }
      &.#{$active} {
        @include menu-item-active-inline;
      }
      &:hover {
        #{$menu-item-anchor} {
          @include menu-item-hover-inline;
        }
      }
    }
  }
}

@media (max-width: $mobile-menu-max-width) {
  .#{$menu-mobile} {
    @include menu;
    .#{$button} {
      border-radius: $mobile-menu-item-button-radius;
    }
    &.#{$items} {
      display: block;
      margin: 0;
    }
    #{$menu-item} {
      &.#{$active} {
        @include menu-item-active-block;
      }
      &:hover {
        #{$menu-item-anchor} {
          @include menu-item-hover-block;
        }
      }
      #{$menu-item-anchor} {
        &:focus {
          @include menu-item-anchor-focus-block;
        }
      }
    }
  }
  ul.#{$items}.#{$menu-mobile} {
    display: block;
    margin: 0;
    li, #{$menu-item-anchor} {
      display: block;
      width: auto;
    }
    .#{$has-popup}.#{$popup-hoverable}:hover > .#{$popup}, .#{$has-popup} > input:checked ~ .#{$popup} {
      display: block;
      width: 100%;
      max-width: none;
    }
    #{$menu-item-anchor} {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

// Side style

@if ($include-core-layout-side == true) {
  #{$side} {
    #{$menu} {
      &.#{$menu-inside-fixed} {
        width: inherit;
        .#{$menu-inside}, #{$menu-item} {
          width: inherit;
        }
      }
      &.#{$menu-inside-absolute} {
        .#{$menu-inside} {
          right: 0;
        }
      }
    }
  }
}