$color-gradient-yellow: #fbc361;

@mixin solid-yellow-button {
  color: $greyscale-black;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(0, 0, 0, 0.2) 100%
    ),
    $color-gradient-yellow;
  background-blend-mode: soft-light, normal;
  border-width: 0;

  &:hover {
    background-color: lighten($color-gradient-yellow, 10%);
  }

  &:active {
    background: $color-gradient-yellow;
  }
}

@mixin bordered-button {
  color: $greyscale-dark;
  background: transparent;
  border: 1px solid $greyscale-light;
  box-sizing: border-box;

  &:hover {
    border-color: $greyscale-medium;
  }

  &:active {
    color: $greyscale-dark;
    border-color: $greyscale-dark;
  }
}

@mixin solid-white-button {
  color: $color-black;
  background-color: $color-white;
  &:hover {
    background-color: $color-gray-10;
  }
  &:active {
    background-color: $color-gray-15;
  }
}

@mixin bordered-white-button {
  color: $color-white;
  background: transparent;
  border: 2px solid $color-white;
  &:hover,
  &:active {
    color: $color-gray-35;
    border-color: $color-gray-35;
  }
}

@mixin pagination-button {
  color: $brand-primary-fg;
  font-size: 10px;
  letter-spacing: 4px;
  background: transparent;
  text-transform: uppercase;
  border: 1px solid $brand-primary-fg;
  @include font-sans-bold;

  &:hover {
    border-color: darken($brand-primary-fg, 20%);
    color: darken($brand-primary-fg, 20%);
  }

  @include medium {
    font-size: $secondary-font-size;
    letter-spacing: 6px;
  }
}

.button {
  @include font-sans-bold;
  font-size: 16px;
  background-color: gray;
  padding: 0 20px;
  height: 40px;
  border-radius: 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  transition: all 60ms linear;
  vertical-align: top;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;

  &:focus:not(:active):not(:visited) {
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 5px 0px,
      $greyscale-black 0px 0px 0px 2px inset;
  }
}

.button.size-xs {
  height: 28px;
  transition: none;
}

.button.size-md {
  font-size: $base-font-size;
  height: 48px;
  padding: 0 22px;
}

.button.size-lg {
  font-size: 20px;
  height: 48px;
  border-radius: 100px;
  padding: 0 35px;

  @include medium {
    font-size: 27px;
    height: 60px;
    padding: 0 50px;
  }
}

.button.primary-action {
  @include solid-yellow-button;
}

.button.secondary-action {
  @include bordered-button;
}

.button.pagination-button {
  @include pagination-button;
}

// Make the button not hoverable/activable if it's
// disabled. '.button[disabled]' selects disabled buttons.
// '.button.disabled' selects disabled links.
.button[disabled].primary-action,
.button.disabled.primary-action {
  background: $greyscale-light;
  color: $greyscale-black;
  cursor: default;
  pointer-events: none;

  &:hover {
    background: inherit;
  }

  &:active {
    background: inherit;
  }
}

// Make the button not hoverable/activable if it's
// disabled. '.button[disabled]' selects disabled buttons.
// '.button.disabled' selects disabled links.
.button[disabled].secondary-action,
.button.disabled.secondary-action {
  border-color: $greyscale-light;
  color: $greyscale-medium;
  cursor: default;
  pointer-events: none;

  &:hover {
    border-color: inherit;
  }

  &:active {
    color: inherit;
    border-color: inherit;
  }
}