.wp-button-big {
  font-size: 20px;
  max-width: 540px;
  margin: 0 auto;
  padding: $global-padding/2;
  background-color: transparent;
  border: 2px solid transparent;
  text-align: center;
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition: color 0.4s, background-color 0.4s;

  &.bright {
    a {
      color: $brand-white;
      text-align: left;
    }
  }

  &.primary {
    border-color: $brand-primary;

    p, a {
      color: $brand-primary;
      display: block;
      font-weight: 700;
      width: 100%;
    }

    &:hover {
      border-color: $brand-secondary;

      p, a {
        color: $brand-secondary;
      }
    }

    &.active {
      background-color: $brand-primary;
      border-color: $brand-primary !important;

      p, a {
        color: $brand-white;
      }
    }
  }

  &.secondary {
    border-color: $brand-secondary;

    p, a {
      color: $brand-secondary;
    }

    &:hover {
      border-color: $brand-primary;

      p, a {
        color: $brand-primary;
      }
    }

    &.active {
      background-color: $brand-secondary;
      border-color: $brand-secondary !important;

      p, a {
        color: $brand-white;
      }
    }
  }

  @include breakpoint(small down) {
    margin-bottom: $global-padding;
  }
}

.wp-button-primary {
  border: 2px solid $brand-primary;
  display: inline-block;
  padding: 0 $global-padding;

  a {
    color: $brand-primary;
    font-size: $small-font-size;
    text-align: center;
  }
}