/* Button Styles */

button {
  font-family: inherit;
}

// This rule overrides some Angular Material styles defined for `.mat-button`
// (hence we include `.mat-button` in the selector).
a.button.mat-button,
.button {
  color: inherit;
  display: inline-block;
  @include line-height(32);
  padding: 0px 16px;
  @include font-size(14);
  font-weight: 400;
  border-radius: 3px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  border: none;

  // SIZES
  &.button-small {
    @include font-size(12);
    @include line-height(24);
    padding: 0px 8px;
  }

  &.button-large {
    @include font-size(15);
    @include line-height(48);
    padding: 0px 24px;
  }

  &.button-x-large {
    @include font-size(16);
    @include line-height(56);
    padding: 0px 24px;
  }


  // COLORS

  &.button-secondary {
    background: $mediumgray;
    color: rgba($white, .87);
  }

  &.button-plain {
    background: $white;
    color: rgba($darkgray, .87);
  }

  &.button-subtle {
    background: $mediumgray;
    color: darken($offwhite, 10%);

    &:hover {
      color: rgba($white, 0.7);
    }
  }

  &.button-blue {
    background: $blue;
    color: rgba($white, .87);

    &:hover {
      color: rgba($white, 0.7);
    }
  }

  &.button-banner {
    background: $darkgray;
    color: rgba($white, .87);
  }
}

.cta-bar {
  text-align: center;

  .button {
    margin: 0px 8px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
    transition: all .2s ease-in-out;
    &:hover {
        transform: scale(1.1);
        color: $offwhite;
    }
  }
}


.group-buttons {
  margin: 16px auto 32px;

  // This rule overrides some Angular Material styles defined for `.mat-button`
  // (hence we include `.mat-button` in the selector).
  a.button.mat-button.filter-button {
    background-color: rgba($blue, 0.2);
    border-radius: 4px;
    @include font-size(16);
    @include line-height(48);
    margin: 8px;
    padding: 0px 16px;
    width: 168px;

    &.selected,
    &:hover {
      background-color: $blue;
      color: $white;
    }

    @media (max-width: 480px) {
      @include font-size(14);
      width: auto;
    }
  }
}

[mat-button], [mat-raised-button], [mat-button], [mat-raised-button] {
  text-transform: uppercase;
}
