.ebs-sort-by__tooltip {
  padding: 0;
  border: 1px solid $border-color;
  border-radius: rem($border-radius);
  width: rem(162.5px);
  max-height: rem($sort-by-tooltip-height);
  overflow: hidden auto;

  &-title {
    @include fontMedium;
    font-size: rem(11px);
    padding: rem(12.5px);
    border-bottom: 1px solid $border-color;
    color: #3c3939;
  }

  &-items &-item {
    @include fontMedium;
    @include text-ellipsis;
    position: relative;
    padding: rem(12.5px);
    font-size: rem(12px);
    cursor: pointer;
    transition: 0.2s;

    &--active {
      @include fontBold;
      color: var(--primary-color);
    }

    &:hover {
      background-color: #f4f3f2;
      color: var(--primary-300);
    }

    &:not(:last-child) {
      border-bottom: 1px solid $border-color;
    }

    .ebs-icon {
      position: absolute;
      right: rem(10px);
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.ebs-sort-by__wrapper {
  position: relative;
  display: flex;

  > .ebs-button--wrapper {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &--asc > .ebs-button--wrapper .ebs-icon {
    transform: rotate(180deg);
  }

  .ebs-tooltip__trigger > .ebs-button--wrapper {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .ebs-button--wrapper {
    .ebs-icon {
      transition: 300ms transform;
    }
  }

  .ebs-button--ghost .ebs-button {
    color: $sort-by-text-color;

    .ebs-icon {
      color: $sort-by-icon-color;
    }

    &:hover {
      color: $sort-by-text-hover-color;

      .ebs-icon {
        color: $sort-by-icon-hover-color;
      }
    }
  }
}
