@import './../mixins/overlayanim.scss';
@import './../mixins/comTheme.scss';

$nested-menu: amos-nestedmenu;
$menu-main-color: #10161a;
$menu-dark-color: #343a40;
$menu-item-hover-color: rgba(#a7b6c2, 0.3);
$menu-item-active-color: rgba(#738694, 0.3);

.#{$nested-menu} {
  min-width: 100%;
  margin: 0;
  font-size: 14px;
  text-align: left;
  border-radius: 3px;
  box-sizing: border-box;

  li {
    position: relative;
    margin: 0;
    list-style: none;
  }

  &.bordered {
    box-shadow: 0 0 0 1px rgba($menu-main-color, 0.1), 0 0 0 rgba($menu-main-color, 0), 0 1px 1px rgba($menu-main-color, 0.2);
  }

  &-divider {
    display: block;
    padding: 5px;
    margin: 5px;
    border-top: 1px solid rgba($menu-main-color, 0.15);

    > strong {
      display: block;
      line-height: 17px;
    }

    &:not(:first-of-type) {
      > strong {
        margin-top: 10px;
      }
    }
  }

  // light theme
  &-light,
  &-light & {
    color: #333;
    background: white;
  }
}

.#{$nested-menu}-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 10px 12px;
  line-height: 20px;
  color: inherit;
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.3s;
  user-select: none;

  &:hover:not(.disabled),
  &.active {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    background-color: $menu-item-hover-color;
  }

  &:active:not(.disabled),
  &.active {
    background-color: $menu-item-active-color;
  }

  &.disabled {
    cursor: not-allowed;
    outline: none;
  }

  &.disabled &-icon,
  &.disabled {
    color: #999;
  }

  &-text {
    flex-grow: 1;
  }

  & > * {
    margin-right: 7px;
  }

  & > :last-child {
    margin-right: 0;
  }

  &-multiline {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap;
  }
}

.#{$nested-menu}-subitem {
  & &-collapse {
    height: 0;
  }

  &-collapse {
    position: relative;
    top: initial;
    right: initial;
    bottom: initial;
    left: initial;
    overflow: hidden;
    transition: height 300ms;

    ul {
      min-width: 100%;
      padding-right: 0;
    }
  }

  &-collapse-icon {
    color: inherit;
    transform: scale(0.79);
  }

  &-popup {
    min-width: 160px;
  }

  &-title.#{$nested-menu}-subitem-collapse-title {
    .close,
    .open {
      transition: 0.3s all;
    }

    .close {
      transform: scale(0.79) rotate(0);
    }

    .open {
      transform: scale(0.79) rotate(90deg);
    }
  }

  &-enter,
  &-enter-done,
  &-exit {
    display: inherit;
  }
}

@include overlay-animate(#{$nested-menu}-subitem-animate);

.#{$nested-menu}-horizontal {
  display: flex;
  align-items: center;
  flex-direction: row;
  text-align: center;
  border: 1px solid #e9e9e9;
  border-radius: 0;

  > li {
    display: inline-block;

    .#{$nested-menu}-subitem {
      &-popup {
        min-width: auto;
      }
    }
  }

  .#{$nested-menu}-item {
    border-radius: 0;
  }
}

// theme
// -- dark
@include nestedmenu-theme(dark, $menu-dark-color, white);
// --light

// no aminate
@keyframes nmSubFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes nmSubFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@include overlay-mask-animate(#{$nested-menu}-subitem-noanimate);

.#{$nested-menu}-subitem-noanimate {
  &-enter-active .amos-overlay-content {
    animation: nmSubFadeIn 200ms both;
  }

  &-exit-active .amos-overlay-content {
    animation: nmSubFadeOut 200ms both;
  }

  &-enter,
  &-enter-done,
  &-exit {
    display: inherit;
  }
}