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

$prefixCls: amos-dropnav;

.#{$prefixCls} {
  @include reset-component2;

  &-item {
    display: inline-block;
    padding: 0 1em;
    cursor: pointer;

    // &:hover {
    //   background-color: $light-bg;
    // }

    &-icon {
      display: inline-block;
      width: 1em;
      margin-right: 1em;
      text-align: center;
    }

    > a {
      position: relative;
      display: block;
      padding: 0 1em;
      line-height: 3em;
      color: $dropnav-light-color;
      text-align: center;
      text-decoration: none;

      &:hover {
        color: $dropnav-light-color-active;
        text-decoration: none;
        background-color: transparent;
      }

      &:focus {
        color: $dropnav-light-color-active;
        text-decoration: none;
        background-color: transparent;
        outline: none;
      }
    }
  }

  .amos-dropdown {
    display: inline-block;
    vertical-align: baseline;

    .#{$prefixCls}-item.amos-dropnav-sub-triger {
      > a {
        &::after {
          position: absolute;
          top: 50%;
          // left: 100%;
          // right: 1em;
          right: -5px;
          width: 0;
          height: 0;
          margin-top: -1px;
          margin-left: -10px;
          border: 4px solid transparent;
          border-top-color: $dropnav-light-color;
          content: '';
          opacity: 0.8;
        }

        &:hover::after {
          border-top-color: $dropnav-light-color-active;
        }
      }
    }

    .#{$prefixCls}-sub {
      padding: 0.3em 0;

      .#{$prefixCls}-item {
        display: block;
        height: 3em;
        // padding: 0 1em;
        line-height: 3em;

        &:hover {
          background: $dropnav-light-bg;
        }

        > a {
          text-align: left;
        }
      }
    }
  }
}

.#{$prefixCls}.#{$prefixCls}-light {
  .#{$prefixCls}-item {
    > a {
      color: $dropnav-light-color;

      &:hover,
      &:focus {
        color: $dropnav-light-color-active;
      }
    }

    &.#{$prefixCls}-item-active {
      > a {
        color: $dropnav-light-color-active;
      }
    }
  }

  .amos-dropdown {
    .#{$prefixCls}-item.amos-dropnav-sub-triger {
      > a {
        &::after {
          border-top-color: $dropnav-light-color;
        }

        &:hover::after {
          border-top-color: $dropnav-light-color-active;
        }
      }
    }

    .amos-dropdown-menu-warpper {
      background-color: white;
    }

    .#{$prefixCls}-sub {
      .#{$prefixCls}-item {
        &:hover {
          background: $dropnav-light-bg;
        }
      }
    }
  }
}

.#{$prefixCls}.#{$prefixCls}-dark {
  .#{$prefixCls}-item {
    > a {
      color: $dropnav-dark-color;

      &:hover,
      &:focus {
        color: $dropnav-dark-color-active;
      }
    }

    &.#{$prefixCls}-item-active {
      > a {
        color: $dropnav-dark-color-active;
      }
    }
  }

  .amos-dropdown {
    .#{$prefixCls}-item.amos-dropnav-sub-triger {
      > a {
        &::after {
          border-top-color: $dropnav-dark-color;
        }

        &:hover::after {
          border-top-color: $dropnav-dark-color-active;
        }
      }
    }

    .amos-dropdown-menu-warpper {
      background-color: black;
      border-radius: 0 0 4px 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.65), 0 0 6px rgba(0, 0, 0, 0.2);
    }

    .#{$prefixCls}-sub {
      .#{$prefixCls}-item {
        &:hover {
          background: $dropnav-dark-bg;
        }
      }
    }
  }
}