@import './../../theme/vars.scss';

$navPrefixCls: #{$vender-prefix}-nav;

$padding-left: 38px;
$border-color: #f0f0f0;
// $border-left-color-hover: #fb6e52; // $primary-color
$border-left-color-hover: $primary-color-deeper; // $primary-color

$dark-bg: #203957;
$white-bg: white;

// 默认 垂直模式
.amos-nav-vertical {
  border-top: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;

  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: white;

    .amos-nav-item {
      > a {
        position: relative;
        display: block;
        padding: 0 15px;
        line-height: 34px;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid $border-color;
        border-left: 5px solid #eaeaea;
        border-radius: 0;

        &:hover {
          color: #333;
          text-decoration: none;
          background-color: #fafafa;
          border-left-color: $border-left-color-hover;
        }

        &:focus {
          text-decoration: none;
          background-color: #fafafa;
          outline: none;
        }
      }

      > ul {
        display: none;
      }

      // 二级
      .amos-nav-item {
        border-right: 0;
        border-left: 0;

        > a {
          padding-left: $padding-left;
        }

        // 三级
        .amos-nav-item {
          > a {
            padding-left: $padding-left * 2;
          }
        }
      }
    }

    .amos-nav-item-icon {
      width: 1em;
      margin-right: 10px;
      text-align: center;
    }

    .amos-nav-item-toggle {
      position: absolute;
      right: 15px;
      color: inherit;
      transition: transform 0.2s;
    }

    .amos-nav-item.amos-nav-item-active {
      > a {
        background-color: whitesmoke;
        border-left-color: $primary-color-deep;

        &:hover,
        &:focus {
          background-color: whitesmoke;
        }
      }
    }

    .amos-nav-item.amos-nav-item-open {
      > ul {
        display: block;
      }

      .amos-nav-item-toggle {
        transform: rotate(90deg);
      }
    }
  }

  &.dark {
    background: $dark-bg;

    ul {
      background-color: white;

      .amos-nav-item {
        > a {
          color: $nav-item-color;
        }

        &-icon {
          color: white;
        }
      }
    }
  }
}

// 水平模式
.amos-nav-horizontal {
  a {
    text-decoration: none;
  }

  .amos-nav-item {
    position: relative;
    display: inline-block;

    &-toggle {
      display: inline-block;
      margin-left: 6px;
      color: inherit;
      transition: transform 0.2s;
    }

    &-icon {
      width: 1em;
      margin-right: 10px;
      text-align: center;
    }

    > a {
      position: relative;
      display: block;
      padding: 6px 12px;
      line-height: 34px;
      color: #333;
      text-decoration: none;
      opacity: 0.6;
      transition: all 0.15s;
    }

    &:hover {
      color: $nav-item-color-hover;
      text-decoration: none;
      background: #163457;
      opacity: 1;
      transition-duration: 0.2s;

      > a {
        text-decoration: none;
      }
    }

    &:focus {
      text-decoration: none;
      background-color: #fafafa;
      outline: none;
    }

    > .amos-nav-sublist {
      position: absolute;
      right: 0;
      left: 0;
      z-index: $zindex-nav;
      display: none;
      background: white;
      border-radius: 0 0 4px 4px;
      border-top-right-radius: 0;
      border-top-left-radius: 0;
    }

    .amos-nav-item {
      display: block;
    }
  }

  .amos-nav-item.amos-nav-item-active {
    color: $nav-item-color-hover;
    opacity: 1;
    // transform: scale(1.1);
    transition-duration: 0.2s;

    &:hover,
    &:focus {
      background-color: $active-hover-foucs-bg-color;
    }
  }

  .amos-nav-item.amos-nav-item-open {
    > ul {
      display: block;
    }

    .amos-nav-item-toggle {
      transform: rotate(90deg);
    }
  }

  &.dark {
    background: $dark-bg;

    .amos-nav-item {
      > a {
        color: $nav-item-color;
      }

      > .amos-nav-sublist {
        background: $dark-bg;
      }

      &-icon {
        color: white;
      }
    }
  }
}