@import "../../style/function";
@import "common";

.im-table-sort {
  display: inline-block;
  position: relative;
  height: 100%;
  width: 100%;

  .im-icon {
    cursor: default;
  }

  .im-dropdown {
    height: 100%;
    width: 100%;
    background-color: transparent !important;

    &-wrap {
      padding: 0;
      height: 100%;

      &-text {
        height: 100%;
        font-size: inherit;
        margin-left: 0;
      }
    }

    &-dropdown {
      top: $tableHeadHeight;
      width: 100px;

      ul {

        li {
          background-color: $tableHeadBgColor;
        }
      }
    }
  }

  &-text {
    line-height: $tableHeadHeight;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }

  &-icon {
    position: absolute;
    right: 0;
    font-size: 0;

    &:hover {
      cursor: pointer;
    }

    &-wrap {
      display: inline-block;
      vertical-align: middle;
      width: 16px;
      height: 100%;
      position: relative;
    }

    &-top {
      top: 13px;
      @include triangle(top, $borderColor: $colorBorder);

      &:hover {
        border-bottom-color: $colorLink;
      }

      &-selected {
        border-bottom-color: $colorLink;
        cursor: default;
      }
    }

    &-bottom {
      bottom: 13px;
      @include triangle(bottom, $borderColor: $colorBorder);

      &:hover {
        border-top-color: $colorLink;
      }

      &-selected {
        border-top-color: $colorLink;
        cursor: default;
      }
    }
  }
}