.button {
  --color-button: var(--main-color);
  --color-button-alt: var(--main-color-alt);
  display: inline-block;
  padding: 0.5em 1em;
  color: #fff;
  background: var(--color-button);
  cursor: pointer;
  text-decoration: none;
  line-height: inherit;
  border-radius: 0.25rem;
  transition: transform 0.05s;
  border: none;
}

.button--tiny {
  padding: 0.25rem 0.5rem;
  font-size: var(--small-font-size);
}

[class*='button'].full {
  margin-right: 0;
  margin-left: 0;
  width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  /* mouse or touchpad */
  .button:hover {
    background: var(--color-button-alt);
  }
}

.button--secondary,
.button--second {
  --color-button: var(--second-color);
  --color-button-alt: var(--second-color-alt);
}

.button--alert {
  --color-button: var(--third-color);
  --color-button-alt: var(--third-color-alt);
}

.button--cta {
  --color-button: var(--accent-color);
  --color-button-alt: var(--accent-color-alt);
}

.button--dark {
  --color-button: var(--dark-color);
  --color-button-alt: var(--dark-color-alt);
}

.button--light {
  --color-button: #fff;
  --color-button-alt: var(--color-light);
  color: var(--color-text);
}

[class*='button--ghost'] {
  color: var(--color-button);
  background: none;
  border: 1px solid;
}

@media (hover: hover) and (pointer: fine) {
  [class*='button--ghost']:hover {
    background: var(--color-button);
    color: #fff;
    border-color: transparent;
  }
}

.button--ghost-alert,
.button--ghost--alert {
  --color-button: var(--third-color);
}

.button--ghost-secondary,
.button--ghost--secondary,
.button--ghost-second,
.button--ghost--second,
.button--ghost.second-color {
  --color-button: var(--second-color);
}

.button--ghost-cta,
.button--ghost--cta,
.button-ghost.accent-color {
  --color-button: var(--accent-color);
}

.button--ghost-dark,
.button--ghost--dark,
.button--ghost.dark-color {
  --color-button: var(--dark-color);
}

.button--ghost-light,
.button--ghost--light {
  --color-button: #fff;
}
.button--ghost-light:hover,
.button--ghost--light:hover {
  color: var(--text-color);
}

.button--cancel {
  color: var(--color-button);
  background: none;
  border: 1px solid;
  --color-button: var(--text-color);
}

@media (hover: hover) and (pointer: fine) {
  .button--cancel:hover {
    background: var(--color-button);
    color: #fff;
    border-color: transparent;
  }
}

@media (hover: none) and (pointer: coarse) {
  /* touchscreens */
}