/*============================================================================
  Buttons
  * reset button elements
  * in-page links that aren't actually anchors should use these
  * then use %button as needed
==============================================================================*/

button {
  background: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: inline-block;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.marketing-button {
  @include button-bg($color-green);
  @include font-brandon-medium;
  transition: all 150ms ease;
  transition-property: background-color border-color color;
  user-select: none;
  appearance: none;
  display: inline-block;
  padding: em(14, 18) em(30, 18);
  border: 0;
  border-radius: $border-radius;
  cursor: pointer;
  color: $color-white;
  font-size: em(18);
  text-align: center;
  white-space: nowrap;

  &:hover,
  &:focus {
    color: $color-white;
    text-decoration: none;
  }

  &[disabled],
  .marketing-form--is-loading & {
    @include button-bg($color-grey-text--light);
    cursor: not-allowed;

    // Scoping these styles to `button` because they cause problems on `input`.
    @at-root {
      button#{&} {
        position: relative;
        color: $color-grey-text--light;

        &:hover,
        &:focus {
          color: darken($color-grey-text--light, $hover-darken);
        }

        &::after {
          @include spinner();
          left: 50%;
        }
      }
    }
  }
}

.marketing-button--lowlight {
  @include button-bg($color-slate);
}

.marketing-button--small {
  padding: em(9) em(30);
  font-size: em(16);
  height: auto;
}

.marketing-button--block {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

// apply to button or input elements that should look like plain links
.marketing-button--reset {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin: 0;
  color: inherit;
  appearance: none;
}

.marketing-button--pill {
  padding-top: em(5);
  padding-bottom: em(5);
  border-radius: em($gutter);
}