/**
 * @file
 * Visual styles for buttons.
 */

.button {
  text-transform: none;
}

.button:hover {
  text-decoration: none;
}

.button:not(:last-child) {
  margin-right: var(--spacing02);
}

.button--transactional {
  --buttonBgColor: var(--orange);
  color: var(--white);
}

.button--secondary {
  border-color: var(--buttonBgColor);
}

.button--tertiary {
  font-size: 1.1em;
  font-weight: normal;
  border-color: transparent;
}

.button--secondary,
.button--tertiary {
  color: var(--buttonBgColor);
  background-color: transparent;
}

.button--secondary:hover,
.button--tertiary:hover,
.button--secondary:focus,
.button--tertiary:focus {
  background-color: transparent;
}

.button__prepend,
.button__append {
  width: 1em;
  height: 1em;
  fill: currentColor;
  align-self: center;
}

.button__prepend {
  margin-right: var(--spacing03);
}

.button__append {
  margin-left: var(--spacing03);
}