/* Primary buttons */
.button,
button,
input[type=reset],
input[type=button],
input[type=submit] {
  appearance: none;
  text-decoration: none;
  font-size: 100%;
  /*text-transform: uppercase; */
  font-weight: 600;
  display: inline-block;
  line-height: 1.2em;
  color: var(--button-primary-color) !important;
  background-color: var(--button-primary-background-color);
  border: 1px solid var(--button-primary-border-color);
  padding: 0.5em 1.25em;
  cursor: pointer;
  transition: background-color 0.4s;
  border-radius: 0.25em;
}

.button:hover,
button:hover,
input[type=reset]:hover,
input[type=button]:hover,
input[type=submit]:hover {
  text-decoration: none !important;
  background-color: var(--button-primary-hover-background-color);
  border: 1px solid var(--button-primary-hover-border-color);
  color: var(--button-primary-hover-color)  !important;
}


.button:active,
button:active,
input[type=reset]:active,
input[type=button]:active,
input[type=submit]:active {
  transition: none;
  border: 1px solid var(--button-primary-active-border-color);
  background-color: var(--button-primary-active-background-color);
  color: var(--button-primary-active-color) !important;
}

.button:focus,
button:focus,
input[type=reset]:focus,
input[type=button]:focus,
input[type=submit]:focus,
.button:focus-visible,
button:focus-visible,
input[type=reset]:focus-visible,
input[type=button]:focus-visible,
input[type=submit]:focus-visible {
  background-color: var(--button-primary-focus-background-color);
  border-color: var(--button-primary-focus-border-color);
  color: var(--button-primary-focus-color) !important;
  box-shadow: 0px 0px 4px var(--button-shadow-color);
  outline: none;
}

.button.disabled,
button.disabled,
input[type=reset].disabled,
input[type=button].disabled,
input[type=submit].disabled,

.button.disabled:hover,
button.disabled:hover,
input[type=reset].disabled:hover,
input[type=button].disabled:hover,
input[type=submit].disabled:hover,

.button[disabled],
button[disabled],
input[type=reset][disabled],
input[type=button][disabled],
input[type=submit][disabled],

.button[disabled]:hover,
button[disabled]:hover,
input[type=reset][disabled]:hover,
input[type=button][disabled]:hover,
input[type=submit][disabled]:hover {
  color: var(--button-primary-color) !important;
  background-color: var(--button-primary-background-color);
  border: 1px solid var(--button-primary-border-color);
  opacity: 0.5 !important;
  cursor: default;
  pointer-events: none !important;
}

/* end Primary buttons */

/* secondary buttons */
.button.secondary,
button.secondary,
input[type=reset].secondary,
input[type=button].secondary,
input[type=submit].secondary {
  appearance: none;
  text-decoration: none;
  font-size: 100%;
  /*text-transform: uppercase; */
  font-weight: 600;
  display: inline-block;
  line-height: 1.2em;
  color: var(--button-secondary-color) !important;
  background-color: var(--button-secondary-background-color);
  border: 1px solid var(--button-secondary-border-color);
  padding: 0.5em 1.25em;
  cursor: pointer;
  transition: background-color 0.4s;
  border-radius: 0.25em;
}

.button.secondary:hover,
button.secondary:hover,
input[type=reset].secondary:hover,
input[type=button].secondary:hover,
input[type=submit].secondary:hover {
  text-decoration: none;
  background-color: var(--button-secondary-hover-background-color);
  border: 1px solid var(--button-secondary-hover-border-color);
  color: var(--button-secondary-hover-color)  !important;
}


.button.secondary:active,
button.secondary:active,
input[type=reset].secondary:active,
input[type=button].secondary:active,
input[type=submit].secondary:active {
  transition: none;
  border: 1px solid var(--button-secondary-active-border-color);
  background-color: var(--button-secondary-active-background-color);
  color: var(--button-secondary-active-color) !important;
}

.button.secondary:focus,
button.secondary:focus,
input[type=reset].secondary:focus,
input[type=button].secondary:focus,
input[type=submit].secondary:focus,
.button.secondary:focus-visible,
button.secondary:focus-visible,
input[type=reset].secondary:focus-visible,
input[type=button].secondary:focus-visible,
input[type=submit].secondary:focus-visible {
  background-color: var(--button-secondary-focus-background-color);
  border-color: var(--button-secondary-focus-border-color);
  color: var(--button-secondary-focus-color) !important;
  box-shadow: 0px 0px 4px var(--button-shadow-color);
  outline: none;
}

.button.secondary.disabled,
button.secondary.disabled,
input[type=reset].secondary.disabled,
input[type=button].secondary.disabled,
input[type=submit].secondary.disabled,

.button.secondary.disabled:hover,
button.secondary.disabled:hover,
input[type=reset].secondary.disabled:hover,
input[type=button].secondary.disabled:hover,
input[type=submit].secondary.disabled:hover,

.button[disabled].secondary,
button[disabled].secondary,
input[type=reset][disabled].secondary,
input[type=button][disabled].secondary,
input[type=submit][disabled].secondary,

.button[disabled].secondary:hover,
button[disabled].secondary:hover,
input[type=reset][disabled].secondary:hover,
input[type=button][disabled].secondary:hover,
input[type=submit][disabled].secondary:hover {
  color: var(--button-secondary-color);
  background-color: var(--button-secondary-background-color);
  border: 1px solid var(--button-secondary-border-color);
  opacity: 0.5 !important;
  cursor: default;
  pointer-events: none !important;
}

/* end secondary buttons*/


/* Red buttons */
.button.red,
button.red,
input[type=reset].red,
input[type=button].red,
input[type=submit].red {
  appearance: none;
  text-decoration: none;
  font-size: 100%;
  /*text-transform: uppercase; */
  font-weight: 600;
  display: inline-block;
  line-height: 1.2em;
  color: var(--button-red-color) !important;
  background-color: var(--button-red-background-color);
  border: 1px solid var(--button-red-border-color);
  padding: 0.5em 1.25em;
  cursor: pointer;
  transition: background-color 0.4s;
  border-radius: 0.25em;

  &:hover {
    text-decoration: none;
    background-color: var(--button-red-hover-background-color);
    border: 1px solid var(--button-red-hover-border-color);
    color: var(--button-red-hover-color)  !important;
  }


  &:active {
    transition: none;
    border: 1px solid var(--button-red-active-border-color);
    background-color: var(--button-red-active-background-color);
    color: var(--button-red-active-color) !important;
  }

  &:focus,
  &:focus-visible {
    background-color: var(--button-red-focus-background-color);
    border-color: var(--button-red-focus-border-color);
    color: var(--button-red-focus-color) !important;
    box-shadow: 0px 0px 4px var(--button-shadow-color);
    outline: none;
  }

  &.disabled,
  &.disabled:hover,
  &[disabled],
  &[disabled]:hover {
    color: var(--button-red-color);
    background-color: var(--button-red-background-color);
    border: 1px solid var(--button-red-border-color);
    opacity: 0.5 !important;
    cursor: default;
    pointer-events: none !important;
  }
}