.sort-dir--desc,
.sort-dir--asc  {
  white-space: nowrap;
  &:after {
    content: '';
    display: inline-flex;
    margin-inline: 0.2rem;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    background-color: #368ac0;
    -webkit-mask-image: var(--bg-icon);
    mask-image: var(--bg-icon);
  }
}

.sort-dir--desc:after {
  --bg-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M98 190.06l139.78 163.12a24 24 0 0036.44 0L414 190.06c13.34-15.57 2.28-39.62-18.22-39.62h-279.6c-20.5 0-31.56 24.05-18.18 39.62z"/></svg>');
}
.sort-dir--asc:after {
  --bg-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M414 321.94L274.22 158.82a24 24 0 00-36.44 0L98 321.94c-13.34 15.57-2.28 39.62 18.22 39.62h279.6c20.5 0 31.56-24.05 18.18-39.62z"/></svg>');
}