.btn,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  color: inherit;
  border: none;
  padding: 0.5ex 1ex;
  border: none;
  border-radius: var(--border-radius);
  font-size: 1rem;
  transition: background 0.2s ease;
}

.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border: none;
}

.btn-sm { 
  font-size: 0.75em;
}

.btn-lg {
  font-size: 1.25rem;
}

.btn-xl {
  font-size: 1.75rem;
}

.btn-2xl {
  font-size: 2.5rem;
}

.btn-3xl {
  font-size: 3.5rem;
}

.btn-emoji {
  background: none;
  padding: 0;
}

.btn-default {
  background-color: var(--clr-surface-tonal-a10);
  color: white;
}

.btn-default:hover {
  background-color: var(--clr-surface-tonal-a10-bright);
}

.btn-primary {
  background-color: var(--clr-info-a0)
}

.btn-primary:hover {
  background-color: var(--clr-info-a0-bright);
}

.btn-danger {
  background-color: var(--clr-danger-a10);
  color: white;
}

.btn-danger:hover {
  background-color: var(--clar-danger-a0-bright);
}

.btn-warning {
  background-color: var(--clr-warning-a10);
  color: black;
}

.btn-warning:hover {
  background-color: var(--clr-warning-a0-bright);
}

.btn-twitch {
  background-color: #6441a5;
  color: white;
  display: flex;
  gap: 0.333em;
  align-items: center;
  justify-content: center;
}

.btn-twitch svg {
  vertical-align: middle;
  width: 1.25ex;
  fill: white;
}

.btn-twitch.btn-sm svg {
  width: 0.75em;
}

.btn-twitch:hover {
  background-color: #774dc5;
}

/* meant to be used with delete buttons inline with text */
.btn-times {
  padding: 0rem 0.4rem 0.13rem;
}