.button {
  user-select: none;
  cursor: pointer;
  border-radius: var(--radius);
  color: var(--fg);
  font-weight: 500;
  background: var(--lighter-gray);
  border: none;
  height: 2rem;
  display: flex;
  align-items: center;
  padding: var(--gap-quarter) var(--gap-half);
  transition: background-color var(--transition), color var(--transition);
}

.button:hover,
.button:focus {
  color: var(--gray);
}

.button:focus {
  outline: 1px dotted var(--gray);
}

.button[disabled] {
  cursor: not-allowed;
  background: var(--lighter-gray);
  color: var(--gray);
}
