@mixin button {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--font-size-16);
  font-weight: var(--bold);
  font-stretch: normal;
  font-style: normal;
  line-height: var(--line-height-32);
  letter-spacing: normal;
  border: none;
  text-decoration: none;
  text-align: center;
  -webkit-appearance: none;
  cursor: pointer;
  padding: var(--spacing-xxs) var(--spacing-s);
  border-radius: 8px;
  box-shadow: 0 8px 16px 0 rgba(0, 43, 57, 0.15);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

  &:hover {
    transform: translateY(-0.125em);
    box-shadow: 0 25px 20px -15px rgba(0, 43, 57, 0.15);
  }
}

.bd-button {
  @include button;
  color: var(--light-sea-green);
  background-color: var(--white);

  &:visited {
    color: var(--light-sea-green);
  }

  &.--inverted {
    color: var(--white);
    border: solid 1px var(--white);
    background-color: transparent;
  }

  &--light {
    @include button;
    background-color: var(--light-sea-green);
    color: var(--white);

    &.--inverted {
      background-color: transparent;
      color: var(--light-sea-green);
      border: solid 2px var(--light-sea-green);
    }
  }

  &--burnt-sienna {
    @include button;
    background-color: var(--burnt-sienna);
    color: var(--white);

    &:visited {
      color: var(--white);
    }
  }
}
