.button {
  font-size: 14px;
  border: 1px solid;
  padding: 7px 15px 8px;
  border-radius: 3px;
  font-weight: 400;
  cursor: pointer;
  box-shadow: 0 -1px 0 rgba(0,0,0,0.15) inset;
  outline: none;
  color: $gray1;
  border-color: $gray6;
  background: -webkit-linear-gradient(180deg, rgb(255, 255, 255), rgb(246, 246, 246));
  background: linear-gradient(180deg, rgb(255, 255, 255), rgb(246, 246, 246));

  &:hover, &:focus {
    background: -webkit-linear-gradient(180deg, rgb(255, 255, 255), rgb(237, 237, 237));
    background: linear-gradient(180deg, rgb(255, 255, 255), rgb(237, 237, 237));
  }
  &:active {
    background: -webkit-linear-gradient(180deg, rgb(237, 237, 237), rgb(255, 255, 255));
    background: linear-gradient(180deg, rgb(237, 237, 237), rgb(255, 255, 255));
  }

  &:hover, &:focus {
    box-shadow: 0 -1px 0 rgba(0,0,0,0.15) inset, 0 2px 4px rgba(0,0,0,0.1);
  }

  &:active {
     box-shadow: 0 1px 2px rgba(0,0,0,0.15) inset, 0 0 0 rgba(0,0,0,0);
    outline: none;
  }

  &-is-smalldropdowntoggle {
    font-size:12px;
    padding: 3px 5px;
  }

  &-is-dropdowntoggle {
    font-size:18px;
  }

  &-is-primary {
    color: $pw;
    border-color: $green1;
    background: -webkit-linear-gradient(180deg, rgb(107, 164, 66), rgb(90, 147, 48));
    background: linear-gradient(180deg, rgb(107, 164, 66), rgb(90, 147, 48));
    &:hover, &:focus {
      background: -webkit-linear-gradient(180deg, rgb(107, 164, 66), rgb(74, 126, 37));
      background: linear-gradient(180deg, rgb(107, 164, 66), rgb(74, 126, 37));
    }
    &:active {
      background: -webkit-linear-gradient(180deg, rgb(74, 126, 37), rgb(107, 164, 66));
      background: linear-gradient(180deg, rgb(74, 126, 37), rgb(107, 164, 66));
    }
    &.button-is-circle {
      padding: 7px 10px 8px;
    }
  }
  &-is-alert {
    color: $pw;
    border-color: $red2;
    background: -webkit-linear-gradient(180deg, rgb(239, 76, 76), rgb(201, 52, 52));
    background: linear-gradient(180deg, rgb(239, 76, 76), rgb(201, 52, 52));
    &:hover, &:focus {
      background: -webkit-linear-gradient(180deg, rgb(203, 52, 52), rgb(144, 23, 23));
      background: linear-gradient(180deg, rgb(203, 52, 52), rgb(144, 23, 23));
    }
    &:active {
      background: -webkit-linear-gradient(5deg, rgb(239, 76, 76), rgb(201, 52, 52));
      background: linear-gradient(5deg, rgb(239, 76, 76), rgb(201, 52, 52));
    }
  }
  &-is-small {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 3px 7px 4px;
    &.button-is-circle {
      padding: 3px 5px 4px;
    }
  }

  &-is-large {
    font-size: 18px;
  }

  &-is-disabled {
    pointer-events: none;
    background: $gray6;
    border-color: $gray5;
    color: $gray3;
    box-shadow: none;
  }

  &-is-circle {
    border-radius: 100px;
  }
}