.table-scroll table thead th[data-mo-sortable="true"] {
  position: relative !important;
  padding-right: 34px !important;
  user-select: none;
}

body:not(.mo-edit-mode)
.table-scroll table thead th[data-mo-sortable="true"] {
  cursor: pointer;
}

.table-scroll table thead th[data-mo-sortable="true"]::after {
  content: "⇅";

  position: absolute;
  top: 50%;
  right: 10px;

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

  width: 20px;
  height: 20px;

  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;

  background: rgba(148, 163, 184, 0.07);
  color: rgba(203, 213, 225, 0.56);

  font-size: 12px;
  font-weight: 800;
  line-height: 1;

  transform: translateY(-50%);

  transition:
    color 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}

body:not(.mo-edit-mode)
.table-scroll table thead th[data-mo-sortable="true"]:hover::after {
  border-color: rgba(129, 140, 248, 0.48);
  background: rgba(99, 102, 241, 0.14);
  color: #c7d2fe;
}

.table-scroll table thead th[data-mo-sort-state="asc"]::after {
  content: "↑";
  border-color: rgba(99, 102, 241, 0.58);
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.14);
}

.table-scroll table thead th[data-mo-sort-state="desc"]::after {
  content: "↓";
  border-color: rgba(99, 102, 241, 0.58);
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.14);
}

body.mo-edit-mode
.table-scroll table thead th[data-mo-sortable="true"]::after {
  opacity: 0.32;
}