.button {

display: inline-block;
padding: $button-padding;
font-size: $button-font-size;
line-height: $button-line-height;
border-radius: $border-radius-s;
cursor: pointer;
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: nowrap;
user-select: none;
transition: background 200ms, color 200ms, fill 200ms, border-color 200ms;
@include button-colors($default-button-colors);

.icon {
  vertical-align: text-top;
}

&.text-with-icon {
  padding-left: 1.5em;

  .icon {
    margin-right: 0.5em
  }
}

&:focus, &.focus {
  outline: none;
}

&.disabled,
&[disabled] {
  cursor: not-allowed;
}

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

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

&.button-small {
  padding: $small-button-padding;
  font-size: $small-button-font-size;
  line-height: $small-button-line-height;

  &.text-with-icon {
    padding-left: 0.75em;
  }
}

&.button-icon {
  min-width: 2.5em;
  padding: $button-padding-v;
  @include button-colors($icon-button-colors);
}

&.button-block {
  display: block;
  width: 100%;
}

}