.app-sort-bar {
  padding: 0 8px;

  .ivu-row-flex.page-sort-bar {
    width: 100%;
    height: auto;
    position: relative;
    padding-right: 60px;

    .ivu-col {
      border-radius: 2px;
      user-select: none;
      text-align: center;
      margin: 6px 16px;
      display: flex;
      align-items: flex-end;
      padding-bottom: 4px;
      background-color: var(--item-background-color-bright);
      border: 1px solid var(--item-font-color-bright);
      margin-left: -1px;
      vertical-align: middle;
      vertical-align: -webkit-baseline-middle;

      .sort-field-text {
        margin-left: 7px;
        vertical-align: middle;
      }

      .caret-wrapper {
        width: 15px;
        display: inline-block;
        position: relative;
        top: 4px;
        padding-bottom: 2px;

        .ivu-icon {
          display: block;
          line-height: 0.5;
          color: var(--item-font-color-light);
        }
      }
    }

    // 悬浮样式
    .ivu-col:hover {
      transform: scale(1.01);
      position: relative;
      z-index: 2;

      .sort-field-text {
        color: var(--item-font-color-bright);
      }
    }

    // 选中样式
    .sort-ascending,
    .sort-descending {
      border: 1px solid var(--item-font-color-hover);
      position: relative;
      z-index: 2;

      .sort-field-text {
        color: var(--item-font-color-hover);
        font-weight: 800;
      }
    }

    .sort-ascending .caret-wrapper .ivu-icon.ivu-icon-md-arrow-dropup,
    .sort-descending .caret-wrapper .ivu-icon.ivu-icon-md-arrow-dropdown {
      color: var(--item-font-color-light);
    }

    .issort {
      position: absolute;
      cursor: pointer;
      top: 10px;
      right: 10px;
      z-index: 1;
    }
  }
}

.slide-in(@x-begin, @x-end, @c-begin, @c-end, @name) {
  @keyframes @name {
    from {
      transform: translateX(@x-begin);
      background-color: @c-begin;
    }

    to {
      transform: translateX(@x-end);
      background-color: @c-end;
    }
  }
}

.slide-in(1670px, 0px, #fff, #EEF2F5, fadein);

.animation(@animation-name, @animation-duration, @animation-timing-function, @animation-delay, @play-state) {
  animation: @arguments;
}

;
// .open-bar {
//   .animation(fadein,0.7s,linear,0s,forwards);
// };