@import '../style/functions.scss';
@import '../style/theme.scss';
@import '../style/mixins.scss';

$menu-prefix: 'dk-menu';

.#{$menu-prefix} {
  @include reset-component();
  position: relative;
  list-style: none;
  background-color: $menu-bg;
  transition: background-color .3s, width .2s;

  ul,
  ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &-item,
  &-submenu-title {
    position: relative;
    display: flex;
    margin-bottom: 0;
    color: $menu-item-color;
    align-items: center;
    cursor: pointer;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;

    &:before {
      content: '';
      position: absolute;
      transition: background-color .2s ease-in-out;
    }

    &:hover {
      color: $menu-item-active-color;
    }

    &-active {
      color: $menu-item-active-color;

      &:before {
        background-color: $menu-item-active-color;
      }
    }

    &-disabled {
      opacity: $menu-disabled-opacity;
      pointer-events: none;
    }
  }

  &-item-group {
    position: relative;
    display: flex;
    align-items: center;
    height: $menu-item-group-height;
    padding: 0;
    margin: 0;
    color: $menu-item-color;
    opacity: 0.7;
  }

  &-icon {
    width: $menu-item-icon-size;
    height: $menu-item-icon-size;
    margin-right: $menu-item-icon-margin-x;
    font-size: $menu-item-icon-size;
  }

  &-submenu-list {
    padding: 0;
    margin: 0;
    height: 0;
    transition: height 0.35s ease;

    &-opened,
    &-exit,
    &-enter-done {
      height: auto;
      display: block;
    }

    &-exit-done {
      height: 0;
      display: none;
    }
  }

  &-arrow {
    font-size: $menu-item-icon-size;
    transform: rotate(0);
    transition: transform .35s ease;

    &-active {
      transform: rotate(-180deg);
    }
  }

  &-vertical {
    width: $menu-width;
    border-right: 1px solid $menu-border-color;

    .#{$menu-prefix}-item,
    .#{$menu-prefix}-submenu-title {
      width: 100%;
      height: $menu-vertical-item-height;
      padding: 0 $menu-vertical-item-padding-x;

      &:before {
        top: 8px;
        bottom: 8px;
        left: 0;
        width: 2px;
      }

      &-active {
        background-color: $menu-item-active-bg;
      }
    }

    .#{$menu-prefix}-item-group {
      padding: 0 $menu-item-group-padding-x;
    }

    .#{$menu-prefix}-arrow {
      position: absolute;
      right: $menu-vertical-item-padding-x;
    }

    .#{$menu-prefix}-submenu-list {
      overflow: hidden;
    }

    .#{$menu-prefix}-submenu .#{$menu-prefix}-item {
      padding-left: $menu-vertical-item-padding-x + $menu-item-icon-size + $menu-item-icon-margin-x;
    }

    .#{$menu-prefix}-submenu .#{$menu-prefix}-submenu .#{$menu-prefix}-submenu-title {
      padding-left: $menu-vertical-item-padding-x + $menu-item-icon-size + $menu-item-icon-margin-x;
    }

    .#{$menu-prefix}-submenu .#{$menu-prefix}-submenu .#{$menu-prefix}-item {
      padding-left: $menu-vertical-item-padding-x * 2 + $menu-item-icon-size + $menu-item-icon-margin-x;
    }
    .#{$menu-prefix}-submenu .#{$menu-prefix}-item-group {
      padding-left: $menu-item-group-padding-x + $menu-item-icon-size + $menu-item-icon-margin-x;
    }
  }


  &-horizontal {
    @include clearfix();
    border-bottom: 1px solid $menu-border-color;

    .#{$menu-prefix}-arrow {
      position: relative;
      margin-left: $menu-item-icon-margin-x;
    }

    &-item,
    &-submenu-title {
      float: left;
      height: $menu-horizontal-item-height;
      padding: 0 $menu-horizontal-item-padding-x;

      &:before {
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        z-index: 9;
      }

      &:hover {
        color: $menu-item-active-color;
      }
    }

    &-submenu-list {
      position: absolute;
      top: 100%;
      left: 0;
      min-width: $menu-width - 40px;
      margin-top: 7px;
      background-color: $menu-bg;
      z-index: 10;
      box-shadow: $menu-shadow;
      max-height: $menu-horizontal-item-height * 7;
      overflow: auto;

      .#{$menu-prefix}-submenu,
      .#{$menu-prefix}-item,
      .#{$menu-prefix}-submenu-title {
        float: none;
        width: 100%;
        height: $menu-vertical-item-height;

        &:hover {
          background-color: $menu-item-active-bg;
          color: $menu-item-color;
        }

        &:before {
          top: 8px;
          bottom: 8px;
          left: 1px;
          width: 2px;
          height: auto;
        }
      }

      .#{$menu-prefix}-arrow {
        position: absolute;
        right: $menu-vertical-item-padding-x / 2;
        transform: rotate(-90deg);
      }
    }
  }
}

.#{$menu-prefix}-dark {
  border-color: $menu-dark-border-color;
  background-color: $menu-dark-bg;

  .#{$menu-prefix}-item,
  .#{$menu-prefix}-submenu-title {
    color: $menu-dark-item-color;

    &:hover {
      background-color: $menu-dark-bg;
      color: $menu-dark-item-active-color;
    }
  }

  .#{$menu-prefix}-item-active {
    color: $menu-dark-item-active-color;
    background-color: $menu-dark-item-active-bg;

    &:hover {
      background-color: $menu-dark-item-active-bg;
    }
  }

  .#{$menu-prefix}-item-group {
    color: $menu-dark-item-color;
  }

  &-submenu-list {
    background-color: $menu-dark-bg;

    .#{$menu-prefix}-submenu,
    .#{$menu-prefix}-item {
      float: none;
      width: 100%;
      height: $menu-vertical-item-height;
    }

    .#{$menu-prefix}-item,
    .#{$menu-prefix}-submenu-title {
      color: $menu-dark-item-color;

      &:hover {
        background-color: $menu-dark-item-active-bg;
        color: $menu-dark-item-active-color;
      }
    }
  }
}