.button {
  background: rgb(var(--background-color));
  border-color: rgb(var(--border-color));
  border-width: var(--border-width, 0);
  border-style: solid;
  border-radius: var(--border-radius);
  color: rgb(var(--font-color));
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  -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));
  }
}