button,
input[type="submit"],
a.button,
input.button {
  @include button-defaults;
  position: relative;

  &.secondary {
    background-color: $secondary-button-bg-color;
    color: $secondary-button-text-color;
    border-color: $secondary-button-border-color;

    &:focus {
      @include default-focus-style(
        $border-color: $button-focus-border-color,
        $box-shadow: $button-focus-box-shadow
      );
    }

    &:active,
    &:active:focus {
      border-color: $button-hover-border-color;
      box-shadow: none;
    }
  }

  &.small {
    padding: $small-button-padding;
    line-height: 4 * $default-padding;
    font-size: inherit;
  }

  &.with_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    .icon {
      font-weight: normal;
      margin-right: $default-margin;
      color: inherit;
    }
  }

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

.icon_button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: $icon-button-width;
  height: $icon-button-height;
  margin: 0;
  padding: 0;
  text-shadow: none;
  border-radius: $default-border-radius;

  &.small {
    width: $icon-button-small-width;
    height: $icon-button-small-height;
    background: none;
    border: none;
    padding: 0; // button.small has padding
  }

  &.active,
  &:active,
  &:hover:not([disabled]):not(.disabled):not(.linked) {
    text-decoration: none;
    background-color: $default-border-color;
    cursor: pointer;
  }

  .icon {
    color: inherit;
    transition: color 250ms;
  }

  &.disabled,
  &[disabled] {
    pointer-events: none;

    i {
      opacity: 0.3;
    }

    &:hover {
      text-decoration: none;
      cursor: default;
    }
  }

  &.linked {
    @include linked-button;
  }

  &:focus:not(.disabled):not([disabled]) {
    @include default-focus-style;
  }

  .spinner {
    position: static;
    transform: none;
  }
}

button.icon_button {
  background: transparent;
  border: 0 none;
  box-shadow: none;
  font-weight: normal;

  &:disabled,
  &.disabled {
    background: transparent;
  }
}

#new_element button.button {
  float: right;
}