@import "./typography";

/*
Generic landing page button

You may want to override following properties:

- background-color
- border-color
- height

*/
@mixin landing-page__button {
  $button-border-size: 2px;

  @include typography__semibold;
  font-size: 16px;
  letter-spacing: 0.2px;
  padding: (16px - $button-border-size) (32px - $button-border-size);
  display: inline-block;

  border-radius: 1000px; // High enough number to get fully rounded corners

  border-width: $button-border-size;
  border-style: solid;
  border-color: transparent;

  &:hover {
    @include hover-transition;
    color: #FFF;
  }
}