@import "mixins/color-button";
@import "mixins/fontSize";
@import "palette";
@import "variables";
// Override normalize.css webkit-appearance.
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: none;
}

button,
.button,
.btn {
  + button,.button,.btn {
    margin-left: em-calc(16px);
  }
  cursor: pointer;
  padding: em-calc(8px) em-calc(16px);
  line-height: normal;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: baseline;
  display: inline;
  max-width: 100%;
  transition: 200ms all;
  user-select: none;
  letter-spacing: 0.025em;
  border-radius: 0;
  border-width: $global-border-width;
  border-style: solid;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  @include color-button($button-color);

  &.expanded,&.full-width {
    width: 100%;
  }
  &[disabled] {
    cursor: normal;
    opacity: 0.5;
    pointer-events: none;
  }
  &--brand {
    @include color-button($brand-color);
  }
  &--block {
    display: inline-block;
    width: 100%;
  }
  &--positive,&--save,&--create {
    @include color-button($positive-color);
  }
  &--cancel {
    @include color-button($light-blue-color);
    color: $unselected-text;
    &:hover {
      color: $selected-text;
    }
  }
  &--delete {
    @include color-button($negative-color);
  }
  &--warning {
    @include color-button($warning-color);
  }
  &--secondary {
    @include color-button($neutral-color);
  }
  &--plain {
    @include color-button($white-color);
  }
  &--dark {
    @include color-button($dark-blue-color);
  }
  &--sm,&--small {
    @include font-size(13px);
  }
  &--xs,&--xsmall {
    @include font-size(11px);
  }
  &--header {
    @include font-size(13px);
    margin-left: 0.66em;
    margin-bottom: 0.33em;
  }
  &--lg,&--large {
    @include font-size(20px);
  }
  &--xl,&--xlarge {
    @include font-size(24px);
  }
  &--clean {
    background: none;
    border: none;
    transition: none;
    &:hover {
      background: none;
      box-shadow: none;
      color: $white-color;
    }
    @include color-clean-button($brand-color);
  }
  &--save {
    @include color-clean-button($positive-color);
  }
  &--delete {
    @include color-clean-button($negative-color);
  }
  &--warning {
    @include color-clean-button($warning-color);
  }
  &--secondary {
    @include color-clean-button($neutral-color);
  }
  &--no-pad {
    padding: 0;
  }
}