.btn,
.btn-checkbox input:checked+span {
  background-color: var(--color-primary);
  border-radius: 6px;
  display: inline-block;
  border: 0px;
  color: var(--color-primary-contrast);
  font-size: 24px;
  padding: 12px 32px;
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font-family);
  text-decoration: none !important;
}

.btn-flex-row {
  display: flex;
  flex-direction: row;
}

.btn-background-secondary {
  background-color: var(--color-background-secondary);
  color: var(--color-primary);
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: white;
}

.btn-checkbox label input {
  display: none;
}

.btn-light {
  background-color: var(--color-background-primary);
  color: var(--color);
  border: 1px solid var(--color);
  border-radius: 4px;
}

.btn-small,
.btn-checkbox input:checked+span {
  font-size: 12px;
  padding: 4px 16px;
}

.btn-oblong,
.btn-checkbox input:checked+span.btn-oblong {
  border-radius: 100px;
}


.btn:hover:not(.btn-no-link),
.btn-small:hover:not(.btn-no-link),
.btn-oblong:hover:not(.btn-no-link),
.btn-light:hover:not(.btn-no-link),
.btn-checkbox:hover:not(.btn-no-link) input:checked+span {
  background-color: var(--color-primary-flash);
  color: var(--color-primary-contrast);
}

.btn-red-light:hover:not(.btn-no-link),
.btn-red {
  background-color: var(--color-red);
  color: white;
}

.btn-red-light,
.btn-red:hover:not(.btn-no-link) {
  background-color: white;
  color: var(--color-red);
  box-shadow: inset 0px 0px 0px 1px var(--color-red);
}


.btn-checkbox:hover:not(.btn-no-link) input+span {
  color: var(--color-primary-flash);
  background-color: var(--color-background-secondary);
}

.btn-light:hover:not(.btn-no-link),
.btn-light-small:hover:not(.btn-no-link) {
  color: var(--color-primary-contrast);
  background-color: var(--color);
}

.btn-secondary:hover:not(.btn-no-link) {
  background-color: var(--color-secondary-flash);
  color: white;
}

.btn-no-link:hover:not(.btn-no-link),
.btn-no-link {
  cursor: unset;
}

/* desktop styles */
@media only screen and (min-width: 720px) {
  .btn-big-md {
    font-size: 38px;
  }

  .btn-normal-md {
    border-radius: 6px;
    display: inline-block;
    font-size: 24px;
    padding: 12px 32px;
    cursor: pointer;
    font-weight: 700;
    font-family: var(--font-family);
  }

  .btn-small,
  .btn-checkbox input:checked+span {
    font-size: 16px;
  }

}