// ============================================================================
// :: Sort button
// ============================================================================
/**
 * Button used to indicate if a list or a corresponding item is sorted in an
 * ascended or descending way
 */

// ============================================================================
// :: Root
// ============================================================================
.a-sort-button {
  position: relative;

  display: inline-flex;
  justify-content: flex-start;
  align-items: center;

  text-align: left;

  background-color: transparent;
  border: none;
}

// ============================================================================
// :: Elements
// ============================================================================
.a-sort-button__text {
  margin-right: 1rem;

  font-size: $font-size-base;
  line-height: $line-height-base;
  text-transform: uppercase;
  text-align: left;

  color: $text-color-medium;
}

.a-sort-button__icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.a-sort-button__icon-part {
  position: relative;

  display: flex;

  line-height: 1;

  transition: color 0.3s ease-in-out;

  // Style the icon
  &::before {
    font-size: $icon-size-base;

    color: $text-color-medium;
  }
}

// ============================================================================
// :: Modifiers
// ============================================================================
.a-sort-button__icon-part--asc {
  @extend %__icon-chevron-up;

  top: 0.4rem;
}

.a-sort-button__icon-part--desc {
  @extend %__icon-chevron-down;

  top: -0.4rem;
}

// ============================================================================
// :: States
// ============================================================================
.a-sort-button {

  &.is-asc {

    .a-sort-button__icon--asc:before {
      color: $text-color-base;
    }
  }

  &.is-desc {

    .a-sort-button__icon--desc:before {
      color: $text-color-base;
    }
  }
}