@import "global.scss";

$btn-large-scale: 1.35;

.button {
  /* stylelint-disable declaration-block-no-duplicate-properties */
  @include preventive-overrides;
  font-size: $button-font-size;
  font-weight: $button-font-weight;
  /* stylelint-enable */
  display: inline-block;
  text-decoration: none;
  border-radius: $button-radius;
  line-height: $button-line-height;
  margin: 0.625rem 1.25rem;
  padding: 0.5rem 1.875rem;
  transition: background-color $default-duration ease,
    color $default-duration ease;
  text-align: center;
  cursor: pointer;
  position: relative;

  &:hover,
  &:focus,
  &:active:focus {
    outline: none;
  }

  &:active {
    transform: perspective(1px) scale(0.975);
  }

  // waffles outline
  &:focus:after {
    content: ' ';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: 2px;
    border: 1px dashed $navy;
    border-radius: 2px;
  }

  :global .fa {
    margin-right: 0.5rem;
  }
}

.button.disabled,
.button:disabled {
  background-color: rgba($green, 0.15);
  color: $navy;

  &:hover {
    background-color: rgba($green-light, 0.15);
  }
}

@mixin color-button($bg, $color, $hover) {
  background-color: $bg;
  color: $color;
  border-style: solid;
  border-width: 2px;
  border-color: $bg;

  &:hover {
    border-style: solid;
    border-width: 2px;
    border-color: $hover;
    background-color: $hover;
    color: $color;
  }

  &:disabled,
  &:disabled {
    background-color: rgba($bg, 0.15);
    color: rgba($color, 0.15);
    border-color: rgba($bg, 0.15);

    &:hover {
      background-color: rgba($bg, 0.15);
      color: rgba($color, 0.15);
      border-color: rgba($bg, 0.15);
    }
  }
}

.primary {
  @include color-button($green, $navy, $green-light);
}

.inverted {
  @include color-button(transparent, $navy, rgba($navy-light, 0.15));
  border-color: $navy;
  &:hover,
  &:focus,
  &:active:focus {
    border-color: $navy;
  }
}

.small {
  border-radius: $button-small-radius;
  font-size: $button-small-font-size;
  line-height: $button-small-line-height;
  margin: 0.5rem;
  padding: 0.5rem 1.5rem;
}

.extra-small {
  @extend .small;

  margin: 0.5rem;
  padding: 0.5rem;
}

.large {
  font-size: $btn-large-scale * $button-font-size;
  line-height: $btn-large-scale * 0.9 * $button-line-height;
}

/* Helper classes */
.btn-group .btn:first-child {
  margin-left: 0;
}
.btn-group .btn:last-child {
  margin-right: 0;
}

.largeScreen {
  display: initial;
}

@media screen and (max-width: 960px) {
  .button {
    padding: 0.5rem (1.875rem / 3);
    margin: 0.625rem (1.25rem / 4);
  }

  .largeScreen {
    display: none;
  }
}
