@import './abstracts/variable';
@import './abstracts/mixin';
@import './icon.scss';

@include b(sort-button){
  display: inline-block;

  @include m(line) {
    .wd-sort-button__left{
      &::after {
        position: absolute;
        content: '';
        width: 19px;
        height: 3px;
        bottom: 6px;
        left: 50%;
        transform: translate(-50%, 0);
        background: $-sort-button-line-color;
        border-radius: $-sort-button-line-height / 2;
        transition: opacity .15s;
        opacity: 0;
      }

      &.is-active::after {
        opacity: 1;
      }
    }
  }
  @include e(wrapper){
    font-size: $-sort-button-fs;
    color: $-sort-button-color;
    word-break: break-all;
    white-space: nowrap;
  }

  @include e(left) {
    position: relative;
    display: inline-block;
    height: $-sort-button-height;
    line-height: $-sort-button-height;
    vertical-align: middle;

    &::after {
      position: absolute;
      content: '';
      width: 19px;
      height: 3px;
      bottom: 6px;
      left: 50%;
      transform: translate(-50%, 0);
      background: $-sort-button-line-color;
      border-radius: $-sort-button-line-height / 2;
      transition: opacity .15s;
      opacity: 0;
    }

    @include when(active) {
      font-weight: $-fw-medium;

      .wd-sort-button__right {
        justify-content: center;
      }

    }
  }

  @include e(right){
    display: inline-block;
    min-width: 14px;
    margin-left: 2px;
    vertical-align: middle;

    @include when(active) {
      .wd-sort-button__icon {
        transform: scale((10/14));
      }
    }
  }

  @include e(icon){
    display: block;
    line-height: 1.1;

    @include m(up){
      transform: scale((10/14)) translate(0, 7px);
    }
    @include m(down){
      transform: scale((10/14)) translate(0, -7px);
    }
  }
}