.sortable {
  bl-sort-link-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
  }

  bl-sort-link-wrapper:hover {
    bl-current-sort:not(.asc, .desc) {
      visibility: visible;
      top: 2px;
      border-top-color: white;
    }
  }

  bl-current-sort {
    visibility: hidden;
    position: relative;
    border: 8px solid transparent;

    &.asc,
    &.desc {
      visibility: visible;
    }

    &.asc {
      top: 2px;
      border-top-color: white;
    }

    &.desc {
      bottom: 3px;
      border-bottom-color: white;
    }
  }

  a::first-letter {
    text-transform: capitalize;
  }
}