.sortList {
  padding: 0 calc(var(--spacer) / 10);
  display: flex;
  align-items: center;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background: var(--background-content);
  overflow-y: auto;
}

@media (min-width: 55rem) {
  .sortList {
    align-self: flex-end;
    overflow-y: unset;
  }
}

.sortLabel {
  composes: label from '@shared/FormInput/Label.module.css';
  margin-bottom: 0;
  margin-left: calc(var(--spacer) / 2);
  margin-right: calc(var(--spacer) / 1.5);
  text-transform: uppercase;
  color: var(--color-secondary);
  font-size: var(--font-size-small);
}

.sorted {
  display: flex;
  padding: calc(var(--spacer) / 6) calc(var(--spacer) / 2);
  margin-right: calc(var(--spacer) / 4);
  color: var(--color-secondary);
  text-transform: capitalize;
  border-radius: 0;
  font-weight: var(--font-weight-base);
  background: var(--background-content);
  box-shadow: none;
}

.sorted:hover,
.sorted:focus,
.sorted.selected {
  color: var(--font-color-text);
  background: inherit;
  transform: none;
  box-shadow: none;
}

.direction {
  display: flex;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 0.75em;
  outline: none;
  margin-left: calc(var(--spacer) / 8);
  margin-top: calc(var(--spacer) / 14);
}