.arrows {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--spacing--xs);
  gap: 1px;
}

.arrow {
  margin-inline-start: 0 !important;
  max-width: var(--key--height--small);
  padding: 0;
}

.up {
  grid-row: 1;
  grid-column: 2;
}

.left {
  grid-row: 2;
  grid-column: 1;

  [dir='rtl'] & {
    grid-column: 3;
  }
}

.right {
  grid-row: 2;
  grid-column: 3;

  [dir='rtl'] & {
    grid-column: 1;
  }
}

.down {
  grid-row: 2;
  grid-column: 2;
}