/* Button */

  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  button,
  .button {
    @include vendor('appearance', 'none');
    @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out, color #{_duration(transition)} ease-in-out');
    background-color: _palette(accent2, bg);
    border-radius: _size(border-radius);
    border: 0;
    color: _palette(accent2, fg-bold) !important;
    cursor: pointer;
    display: inline-block;
    font-weight: _font(weight-bold);
    height: 2.85em;
    line-height: 2.95em;
    padding: 0 1.5em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      background-color: lighten(_palette(accent2, bg), 5);
    }

    &:active {
      background-color: darken(_palette(accent2, bg), 5);
    }

    &.icon {
      padding-left: 1.35em;

      &:before {
        margin-right: 0.5em;
      }
    }

    &.fit {
      display: block;
      margin: 0 0 (_size(element-margin) * 0.5) 0;
      width: 100%;
    }

    &.small {
      font-size: 0.8em;
    }

    &.big {
      font-size: 1.35em;
    }

    &.alt {
      background-color: transparent;
      box-shadow: inset 0 0 0 (_size(border-width) * 2) _palette(border);
      color: _palette(fg-bold) !important;

      &:hover {
        background-color: _palette(border-bg);
      }

      &:active {
        background-color: _palette(border2-bg);
      }

      &.icon {
        &:before {
          color: _palette(fg-light);
        }
      }
    }

    &.special {
      background-color: _palette(accent1, bg);
      color: _palette(accent1, fg-bold) !important;

      &:hover {
        background-color: lighten(_palette(accent1, bg), 5);
      }

      &:active {
        background-color: darken(_palette(accent1, bg), 5);
      }
    }

    &.disabled,
    &:disabled {
      background-color: _palette(fg) !important;
      box-shadow: inset 0 -0.15em 0 0 rgba(0,0,0,0.15);
      color: _palette(bg) !important;
      cursor: default;
      opacity: 0.25;
    }

    @include breakpoint(xsmall) {
      padding: 0;
    }
  }