.mapping {
  margin-bottom: var(--spacing--l);

  &:last-child {
    margin-bottom: 0;
  }
}

.description {
  margin-bottom: var(--spacing--m);
  font-size: var(--font--size--h3);
  font-weight: 300;
}

.keys,
.group {
  display: flex;
  flex-wrap: wrap;
}

.group {
  margin: 0 var(--spacing--s);
}

.slash,
.plus {
  min-width: var(--key--height);
  height: var(--key--height);
  padding: var(--spacing--s) var(--spacing--m);
  font-family: var(--font--family--monospace);
  line-height: calc(var(--key--height) - 2 * (var(--spacing--s) + var(--border--width)));
  vertical-align: middle;
  text-align: center;
}

.group {
  [dir='rtl'] & {
    flex-direction: row-reverse;
  }

  &:first-child {
    margin-inline-start: 0;
  }

  &:last-child {
    margin-inline-end: 0;
  }
}