@import '../../style/themes';
@import '../../style/mixins';

.x-menu {
  @include reset-component();
  @include reset-scroll();
  
  background: $menu-bg;
  cursor: default;
  transition: width 0.3s cubic-bezier(0, 1, 0.29, 1);

  &-vertical {
    width: 320px;
  }
  &-inline {
    width: 320px;
  }
  &-horizontal {
    display: flex;
  }

  &-vertical &-item-content {
    padding: 0 $padding-md;
    &_arrow {
      width: $menu-item-height / 2;
      height: $menu-item-height / 2;
      transform: rotateZ(-90deg);
    }
  }
  
  &-horizontal &-item-content {
    padding: 0 $padding-md;
    &_icon {
      width: unset;
      height: unset;
      margin-right: $margin-xs;
    }
    &_arrow {
      width: unset;
      height: unset;
      margin-left: $margin-xs;
    }
  }

  &-collapsed {
    width: $menu-item-height;
  }

}

.x-menu-item {
  position: relative;

  &-selected {
    background: rgba($menu-item-hover-bg, .4);
    &::after {
      content: ' ';
      position: absolute;
      top: 50%;
      left: 0;
      width: 4px;
      height: $menu-item-height / 2;
      transform: translateY(-50%);
      background: $primary-color;
    }
  }
  &-disabled {
    
  }
}

.x-menu-item-content {
  position: relative;
  display: flex;
  align-items: center;
  height: $menu-item-height;

  &:hover {
    background: $menu-item-hover-bg;
  }
  &:active {
    background: further($menu-item-hover-bg, 6.5);
  }
  &-active {
    color: $primary-color;
    // background: rgba($menu-item-hover-bg, .4);
  }
  &-disabled {
    opacity: .5;
    pointer-events: none;
  }

  &_icon {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: $menu-item-height;
    height: $menu-item-height;
    font-size: 1.2em;
  }
  &_label {
    flex: 1 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &_arrow {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: $menu-item-height;
    height: $menu-item-height;
  }

  a {
    text-decoration: none;
    color: inherit;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }
}

.x-submenu {
  position: relative;
  background: $menu-bg;
  cursor: default;
  
  &-popup {
    position: absolute;
    min-width: 160px;
    box-shadow: $box-shadow-base;
    
    .x-menu-item-content {
      padding: 0 $padding-md;
      &_icon {
        width: unset;
        height: unset;
        margin-right: $margin-xs;
      }
      &_arrow {
        width: unset;
        height: unset;
        margin-left: $margin-xs;
      }
    }
    .x-menu-item-group {
      &_label {
        padding: 0 $padding-md;
      }
    }
  }

  &_children {

  }
}

.x-menu-item-group {
  background: $menu-bg;
  cursor: default;

  &_label {
    position: relative;
    display: flex;
    align-items: center;
    height: $menu-item-height * .75;
    font-size: .85em;
    color: $text-color-secondary;
    overflow: hidden;
    &::after {
      content: ' ';
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: $menu-item-hover-bg;
    }
  }
}