.button {
  @include button-base;
  line-height: 1.2;

  &.mint {
    @include button-fill-style($background: $mint, $background-hover: auto);
  }

  &.light-mint {
    @include button-fill-style($background: $light-mint, $background-hover: auto, $color: $charcoal);
  }

  &.dark-mint {
    @include button-fill-style($background: $dark-mint, $background-hover: auto);
  }

  &.rose {
    @include button-fill-style($background: $rose, $background-hover: auto);
  }

  &.honey {
    @include button-fill-style($background: $honey, $background-hover: auto);
  }

  &.white {
    @include button-fill-style($background: $white, $background-hover: auto, $color: $charcoal);
  }

  &.off-white {
    @include button-fill-style($background: $off-white, $background-hover: auto, $color: $charcoal);
  }

  &.light-grey {
    @include button-fill-style($background: $light-grey, $background-hover: auto, $color: $charcoal);
  }

  &.grey {
    @include button-fill-style($background: $grey, $background-hover: auto);
  }

  &.charcoal {
    @include button-fill-style($background: $charcoal, $background-hover: auto);
  }

  &.facebook {
    white-space: nowrap;
    @include button-fill-style($background: $facebook-blue, $background-hover: auto);
  }

  &.google {
    white-space: nowrap;
    @include button-fill-style($background: $google-red, $background-hover: auto);
  }

  &.dark-mint-on-white {
    white-space: nowrap;
    @include button-fill-style($background: white, $background-hover: auto, $color: $dark-mint);
  }

  &.expanded {
    @include button-expand;
  }

  &.disabled, &[disabled] {
    @include button-disabled;

    &.ripple > .ripple-effect {
      display: none;
    }
  }

  // Icon only tiny buttons
  &.icon {
    padding: 4px;
    margin-bottom: 4px;
  }

  &.icon-left > .fa,
  &.icon-left > .material-icons {
    margin-right: (4em / 20);
  }

  &.icon-right > .fa,
  &.icon-right > .material-icons {
    margin-left: (4em / 20);
  }

  &.has-icon-block {
    padding-left: (75em / $global-size);
    padding-right: (75em / $global-size);
    position: relative;
    & > .icon-block {
      pointer-events: none;
      background-color: rgba(0,0,0,0.1);
      position: absolute;
      top: 0;
      left: 0;

      & > .fa,
      & > .fab {
        font-size: (20em / $global-size);
      }
    }
  }
}
.input-group-button{
  width: (50em / $global-size);
  height: (50em / $global-size);
  .side-button{
    width: 100%;
    padding: 0;
  }
}
.incrementor{
  .input-group{
    margin-bottom: 28px;
    &:last-child {
      margin-bottom: 16px;
    }
  }
  &-header{
    font-size: (13em / $global-size);
    font-weight: 600;
    color: $grey;
    line-height: (22em / 13);
    margin-bottom: (8em / 13);
    margin-top: 12px;
    //letter-spacing: 1px;
  }
  .input-group-field{
    text-align: center;
    border-width: (2em / 13)  0 (2em / 13) 0;
    border-color: $light-mint;
    color: $light-grey;
    font-size: (22em / $global-size);
    height: (36.368em / $global-size);
    z-index: 0;
    &:focus{
      border-width: (2em / 13)  0 (2em / 13) 0;
      border-color: $mint;
      color: $charcoal;
    }
  }
}
.input-group-field.apply-darken{
  border-width: (2em / 13)  0 (2em / 13) 0;
  border-color: $mint;
  color: $charcoal;
}
.cell{
  .add-button {
    margin-right: 0;
    .button {
      text-align: center;
      padding: (12em / 14) 0;
      font-size: 14px;
    }
  }
}
.button {
  border-radius: 4px;
}
.border-dark-mint {
  border: 1px solid $dark-mint;
}

.max-width-half-320-375-button {
  @media only screen and (max-width: 375px) {
    max-width: 50%
  }
}
button.button.hollow {
  &.dark-mint {
    border-color: $dark-mint;
    color: $dark-mint;
    background-color: $white;
    //border-color: $grey;
    //color: $grey;
    //background-color: $off-white;
    //cursor: not-allowed;
    &:hover {
      background-color: $dark-mint;
      color: $white;
    }
  }
}



button.button.hollow {
  &.grey {
    border-color: $light-grey;
    color: $light-grey;
    background-color: $white;
    //border-color: $grey;
    //color: $grey;
    //background-color: $off-white;
    //cursor: not-allowed;
    &:hover {
      background-color: $light-grey;
      color: $white;
    }
  }
}