.button {
  display: inline-block;
  font-family: inherit;
  position: relative;
  text-decoration: none;
  background-color: $ui-highlight-color;
  box-sizing: border-box;
  color: $primary-text-color;
  cursor: pointer;

  @include border-design(transparent, 10px, 4px);
  @include text-sizing(14px, 600, 1em, center);
  @include size(auto, 36px);
  // @include text-overflow(nowrap);

  &:active,
  &:focus,
  &:hover {
    background-color: lighten($ui-highlight-color, 10%);
  }

  &:disabled,
  &.disabled {
    background-color: $ui-primary-color;
    cursor: default;
  }

  &::-moz-focus-inner {
    border: 0;
  }

  &::-moz-focus-inner,
  &:focus,
  &:active {
    outline: 0 !important;
  }

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

  &--destructive {
    transition: none;

    &:active,
    &:focus,
    &:hover {
      background-color: $error-red;
      transition: none;
    }
  }

  &--alternative {
    color: $inverted-text-color;
    background: $ui-primary-color;

    &:active,
    &:focus,
    &:hover {
      background-color: lighten($ui-primary-color, 4%);
    }
  }

  &--alternative-2 {
    background: $ui-base-lighter-color;

    &:active,
    &:focus,
    &:hover {
      background-color: lighten($ui-base-lighter-color, 4%);
    }
  }

  &--secondary {
    color: $darker-text-color;
    background: transparent;
    padding: 3px 15px;
    border: 1px solid $ui-primary-color;

    &:active,
    &:focus,
    &:hover {
      border-color: lighten($ui-primary-color, 4%);
      color: lighten($darker-text-color, 4%);
    }

    &:disabled {
      opacity: 0.5;
    }
  }
}