.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 2.5rem;
  padding: 0 1.9rem;
  color: var(--button-font-color);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 2.5rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--button-background-color);
  border-radius: var(--border-radius);
  border: var(--button-border);
  cursor: pointer;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: var(--button-font-color-enter);
  border-color: var(--button-border-color-enter);
  outline: 0;
}

.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
  color: var(--button-font-color-active);
  border-color: var(--button-border-color-active);
}

.button:disabled {
  border: var(--button-border-disabled);
  color: var(--button-font-color-disabled);
  cursor: not-allowed;
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  border: var(--primary-button-border);
  color: var(--primary-button-font-color);
  background-color: var(--primary-button-background-color);
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: var(--primary-button-font-color-enter);
  background-color: var(--primary-button-background-color-enter);
  border-color: var(--primary-button-border-color-enter);
}

.button.button-primary:active,
button.button-primary:active,
input[type="submit"].button-primary:active,
input[type="reset"].button-primary:active,
input[type="button"].button-primary:active {
  color: var(--primary-button-font-color-active);
  background-color: var(--primary-button-background-color-active);
  border-color: var(--primary-button-border-color-active);
}

.button.button-primary:disabled,
button.button-primary:disabled,
input[type="submit"].button-primary:disabled,
input[type="reset"].button-primary:disabled,
input[type="button"].button-primary:disabled {
  color: var(--primary-button-font-color-disabled);
  cursor: not-allowed;
  background-color: var(--primary-button-background-color-disabled);
  border-color: var(--primary-button-border-color-disabled);
}