.form
  display: flex
  align-items: flex-start
  margin-bottom: $margin

  >*
    margin-bottom: 0

  &.is-tiny
    >.button
      @extends .button.is-tiny
    >.input
      @extends .input.is-tiny

  &.is-small
    >.button
      @extends .button.is-small
    >.input
      @extends .input.is-small

  &.is-large
    >.button
      @extends .button.is-large
    >.input
      @extends .input.is-large

  &.is-rounded
    >.button
      @extends .button.is-rounded
    >.input
      @extends .input.is-rounded


  &-addon
    display: inline-flex
    padding: $padding multiple($padding, 1.5)
    border: 2px solid $black
    border-radius: $borderRadius
    background-color: $black
    color: $white
    vertical-align: top
    text-align: center
    font-size: $font
    _icon-color: $white

    .icon:first-child:not(:last-child)
      margin-right: multiple($padding, (1 / 2))

    .icon:last-child:not(:first-child)
      margin-left: multiple($padding, (1 / 2))

    .icon:only-child
      margin: 0 multiple($padding, (-1 / 2))

    &.is-blue
      background-color: $blue
      border-color: $blue

    &.is-green
      background-color: $green
      border-color: $green

    &.is-red
      background-color: $red
      border-color: $red

  &.has-itemAfter
    .button
      border-top-{$startDir}-radius: 0
      border-bottom-{$startDir}-radius: 0

    .input
      border-top-{$endDir}-radius: 0
      border-bottom-{$endDir}-radius: 0

  &.has-itemBefore
    .form-addon
      border-top-{$endDir}-radius: 0
      border-bottom-{$endDir}-radius: 0

    .input
      border-top-{$startDir}-radius: 0
      border-bottom-{$startDir}-radius: 0