.button {

border-radius: 4px;
@include primary-font;
display: inline-block;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: white;
background-image: none;
border: 2px solid transparent;
white-space: nowrap;
padding: 10px 20px;
margin: 0 3px;
font-size: 14px;
line-height: 1.42857143;
-webkit-appearance: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
transition: .2s all linear;

a {
  color: white;
}

@include button-theme($medium-grey);

&.primary {
  @include button-theme($orange);
}

&.success {
  @include button-theme($green);
}

&.warning {
  @include button-theme($yellow);
}

&.info {
  @include button-theme($blue);
}

&.danger {
  @include button-theme($red);
}

&.disabled {
  @include button-theme($light-grey);
  color: $medium-grey;
  cursor: inherit;
}

&.ghost {
  background-color: transparent;
  border: 2px solid $light-grey;
  color: $light-grey;
}

&.signout {
  border-radius: 0;
  background-color: transparent;
  border: 1px solid $orange;
  color: $orange;
  font-size: 10px;
  font-weight: 600;
  margin-left: 10px;
  padding: 5px 10px;
}

&.large {
  padding: 15px 30px;
}

&.small {
  padding: 5px 10px;
  font-size: 12px;
}

&.xsmall {
  padding: 0 4px;
  font-size: 75%;
}

&.fullwide {
  width: 100%;
  margin: 0; //10px 0 0 0;
  display: block;
}

}

.button-group {

position: relative;
display: inline-block;
vertical-align: middle;

> .button {
  position: relative;
  float: left;

  &:first-child {
    margin-right: 0;
    &:not(:last-child) {
      border-right-radius: 0;
    }
  }

  &:not(:first-child):not(:last-child) {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }

  &:last-child {
    margin-left: 0;
    &:not(:first-child) {
      border-left-radius: 0;
    }
  }
}

}