// Styling for the buttons

/*
 * NOTES:
 * When removing the outline also create a visible replacement so keyboard users
 * always can see their position on the website while navigating.
 */

.c-button {
  border: none;
  &:hover,
  &:focus,
  &:active {
    cursor: pointer;
    text-decoration: none;
  }
}

.c-button__cta {
  @extend .c-button;
  background: $secondary-color;
  color: $primary-color-light;
  height: 3rem;
  padding: 0.8125rem 1.5rem;
  border-radius: 2.5rem;
  line-height: 1.5rem;

  @include media-breakpoint-up(lg) {
    height: 4rem;
    padding: 1.0625rem 2rem;
    line-height: 1.8rem;
  }

  &:hover,
  &:focus {
    background: darken($secondary-color, 20%);
  }

  &:active {
    background: darken($secondary-color, 20%);
  }
}

.c-button__link {
  background: transparent;
  color: $text-color;


  &:hover,
  &:focus {
    color: darken($text-color, 20%);
    text-decoration: underline;
  }

  &:active {
    color: darken($text-color, 20%);
    text-decoration: underline;
  }
}
