.switch {
  display: grid;
  grid-auto-flow: column;
  height: fit-content;
  align-items: center;
  align-self: center;
  background: var(--color-menu);
  border: 1px solid var(--color-input-border);
  border-radius: var(--border-radius);
}

.switch .item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: .5em 1.125em;
  color: var(--color-text);
  border-radius: var(--border-radius);
  text-wrap: nowrap;
}

.switch .active.item {
  background: var(--color-active);
  outline: 1px solid var(--color-input-border);
}

@media (pointer: coarse) {
  .switch .item {
    padding: .75em 1.125em;
  }
}

.switch button.item {
  background: transparent;
}
