/* button */
button, input[type="button"], input[type="submit"], a.button {
  &.tinted {
    --ctrl: var(--ctrl-tint);
    --ctrl-idle: var(--ctrl-tint-idle);
    --ctrl-hover: var(--ctrl-tint-hover);
    --ctrl-active: var(--ctrl-tint-active);
    --ctrl-disabled: var(--ctrl-tint-disabled);
    
    --ctrl-1: var(--ctrl-tint-1);
    --ctrl-3-disabled: var(--ctrl-tint-disabled);
  }
  font: var(--subheadline);
  background-color: var(--ctrl-idle);
  color: var(--ctrl-1);
  border: none;
  border-radius: var(--border-radius);
  text-decoration: none;
  padding: 3px 12px;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 23px;
  user-select: none;
  gap: 6px;
  
  &:hover:not(:disabled) {
    cursor: pointer;
    background-color: var(--ctrl-hover);
  }
  
  &:active:not(:disabled) {
    outline: none;
    background-color: var(--ctrl-active)
  }
  
  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--blue);
  }
}

button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled {
  outline: none;
  background-color: var(--ctrl-disabled);
  color: var(--ctrl-3-disabled);
}

/* icons */
.symbol {
  width: 1rem;
  max-height: 1rem;
}

button .symbol, a.button .symbol {
  height: 1rem;
}