@import '../../styles/define';

.hor-sort-bar{
  @extend %pr;
  @extend %df;
  @extend %h100;
  @extend %usn;
  font-size: j(14);
  background-color: var(--van-background-2);
  padding: 0 j(8);
  box-sizing: content-box;
  overflow-x: scroll;
  overflow-y: hidden;
  height: j(44);
  &::-webkit-scrollbar {
      display: none;
  }
}

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

.hor-sort-item {
  @extend %df;
  @extend %aic;
  @extend %jcc;
  @extend %bsb;
  @extend %cp;
  flex: 1 0 auto;
  padding: 0 j(8);
  line-height: 1.6;


}

.hor-sort-item-label {
  margin-right: j(4);

  &.is-active {
      color: var(--hor-primary-color)
  }
}

.hor-sort-bar-icon{
  position: relative;
  display: inline-block;
  font-size: j(14);
  width: j(14);
  height: j(14);
  transition: color 0.2s ease;
}

.hor-sort-bar-icon::before {
  content: "";
  position: absolute;
  top: j(0);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 j(6) j(6) j(6);
  border-color: transparent transparent var(--hor-info-color) transparent;
}

.asc.hor-sort-bar-icon::before {
  border-color: transparent transparent var(--hor-primary-color) transparent;
}

.hor-sort-bar-icon::after {
  content: "";
  position: absolute;
  bottom: j(0);
  width: 0;
  height: 0;
  border-style: solid;
  border-width:  j(6) j(6) 0 j(6);
  border-color:var(--hor-info-color) transparent transparent  transparent;
}
.desc.hor-sort-bar-icon::after {
  border-color: var(--hor-primary-color) transparent transparent transparent;
}