button {
  cursor: pointer;
  border-radius: 0;
  border: 0;
  padding: 0;
  padding-inline: 1rem;
  background-color: hsl(0, 0%, 85%);
}

button:hover,
button:focus {
  background-color: var(--button-bg-hover);
}

button:disabled {
  background-color: var(--button-disabled-bg);
  border: 1px solid var(--button-disabled-bg);
  color: var(--button-disabled-color);
  cursor: none;
}

.form-button {
  background-color: var(--form-button-bg);
  color: white;
  padding-block: 0.3rem;
  font-weight: 500;
  font-size: 1.05em;
  text-transform: uppercase;
  border: 2px solid var(--form-button-bg);
}

.form-button:not(:disabled):hover,
.form-button:not(:disabled):active,
.form-button:not(:disabled):focus {
  background-color: var(--form-button-hover);
  border: 2px solid var(--form-button-hover);
  cursor: pointer;
}

.button {
  border: 1px solid #999;
  background-color: var(--button-bg);
  /* font-weight: 500; */
  font-size: 1.1rem;
}

.confirm-delete {
  font: inherit;
  cursor: pointer;
  color: var(--delete-text);
  padding-inline: 1rem;
  padding-block-end: 0.2rem;
}

.confirm-delete-small {
  font: inherit;
  cursor: pointer;
  color: var(--delete-text);
  padding-inline: 0.5rem;
  padding-block-end: 0.2rem;
}

.confirm-delete:hover,
.confirm-delete:focus,
.confirm-delete:active,
.confirm-delete-small:hover,
.confirm-delete-small:focus,
.confirm-delete-small:active {
  background-color: var(--delete-bg-hover);
  cursor: pointer;
  color: var(--delete-text);
}

/* THIS ONE FOR RED TEXT NO BG */
.delete {
  color: var(--delete-text);
  font-size: 0.9rem;
  background-color: transparent;
}

.delete:hover,
.delete:focus,
.delete:active {
  background: var(--delete-bg-hover);
  cursor: pointer;
}

.delete-button {
  padding-inline: 1rem;
  background-color: var(--delete-bg);
}

.delete-button:not(:disabled):hover,
.delete-button:not(:disabled):active,
.delete-button:not(:disabled):focus {
  background-color: var(--delete-bg-hover);
  cursor: pointer;
}

.confirm-delete {
  color: var(--delete-text);
}

.add-group,
.add-group:hover,
.add-group:active {
  background-color: hsla(84, 100%, 64%);
  color: black;
}

.remove-group,
.remove-group:hover,
.remove-group:active {
  background-color: hsl(42, 100%, 69%);
  color: black;
}

.copy-button {
  background-color: hsl(0, 0%, 70%);
  color: black;
}

.copy-button:hover {
  background-color: hsl(0, 0%, 60%);
}