.button {
  --background-color-hover: var(--color-primary);
  --border-color: var(--color-primary);
  --border-width: 2px 2px 2px 2px;
  --border-radius: 10px 10px 10px 10px;
  --font-color: var(--color-default);
  --font-color-hover: var(--color-light);
  --padding-min: 10px 15px 10px 15px;
  --padding-max: 10px 15px 10px 15px;
  --border-width-min: 2px 2px 2px 2px;
  --border-width-max: 2px 2px 2px 2px;
  --border-radius-min: 50px 50px 50px 50px;
  --border-radius-max: 50px 50px 50px 50px;
  --font-size-max: 23;
  --font-size-min: 18;
  --padding: var(--padding-min);
  background: rgb(var(--background-color));
  border-color: rgb(var(--border-color));
  border-width: var(--border-width);
  border-style: solid;
  border-radius: var(--border-radius);
  color: rgb(var(--font-color));
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: calc(var(--font-size-min) / var(--base) * 1rem);
  font-weight: 800;
  -ms-flex-pack: center;
      justify-content: center;
  padding: var(--padding);
  text-align: center;
  white-space: nowrap;
  transition: 300ms all ease;
}
@media (pointer: fine) {
  .button:hover {
    background: rgb(var(--background-color-hover));
    color: rgb(var(--font-color-hover));
  }
}

.button--style-one {
  --background-color: var(--color-secondary);
  --background-color-hover: transparent;
  --border-color: var(--color-secondary);
  --font-color: var(--color-light);
  --font-color-hover: var(--color-default);
}

@media (min-width: 992px) {
  .button {
    --padding: var(--padding-max);
    font-size: calc(var(--font-size-max) / var(--base) * 1rem);
  }
}