.button-addon
  display: flex
  align-items: center
  position: relative

  .button
    background: $background-secondary

  .button-item
    background: $background-secondary
    border-top: 1px solid $border
    border-right: 1px solid $border
    border-bottom: 1px solid $border
    height: 40px
    margin-left: -2px
    border-top-right-radius: 4px
    border-bottom-right-radius: 4px
    display: flex
    align-items: center
    justify-content: center

  &:hover

    .button
      background: $background-secondary

  &:active, &.is-active, &:focus

    .button
      background: $background-secondary

  .button-dropdown
    width: 100%
    border-radius: 4px
    background: $background-button
    border: 1px solid $border
    position: absolute
    top: 48px
    left: 0
    right: 0
    z-index: 20
    display: none

    &.is-active
      display: block

    .button-dropdown-item
      width: 100%
      height: 40px
      display: flex
      align-items: center
      padding: 0 10px
      color: $white

      &:hover
        background: $border
        color: $blue

.button
  height: 40px
  font-family: $font-family-regular
  color: $color-secondary
  font-size: 14px
  padding: 0 20px
  text-align: center
  text-transform: none
  transition: none
  display: flex
  justify-content: center
  align-items: center
  outline: none !important
  flex: 1
  font-weight: $weight-bold
  border-radius: 8px
  background-image: linear-gradient(0deg, #F2F4F7 0%, #FFFFFF 100%)
  border: 1px solid $border
  border-radius: 4px
  box-shadow: none !important

  &.is-small
    height: 30px
    padding: 5px 15px
    font-size: 13px
    text-transform: none
    font-weight: $weight-normal

  &.centered-anonymous
    display: flex
    margin: 0 auto
    width: 230px
    padding: 8px 20px

    img
      width: 25px
      height: 25px

  &:focus, &:active
    background-image: linear-gradient(0deg, #EAEEF3 0%, #FFFFFF 100%)
    border: 1px solid $border
    color: $color-secondary

  &.floated
    float: left
    margin-right: 5px

  &.is-fullwidth
    width: 100%

  &.green
    background-image: linear-gradient(-180deg, #39B54A 0%, #34AA44 98%)
    color: $white

  &.red
    background: linear-gradient(to bottom, #F95359, #DD151C)
    color: $white !important
    border-color: $red !important

    &[disabled]
      background: lighten($red, 5)
      border-color: $red
      color: $color

  &.white
    background: transparent
    border-color: $white

  &.black
    background: $black
    color: $white
    border-color: $black
    border-radius: 4px

  &.blue
    background-image: linear-gradient(-1deg, #1991EB 2%, #2DA1F8 98%)
    border-color: #1991EB
    color: $white

  &.yellow
    background: linear-gradient(to bottom, #F7981C, #F76B1C)
    border-color: #F7981C
    color: $white

  &.dark
    background: $header-background
    color: $white
    border-color: $header-background-dark

  &:hover, &.is-hovered
    background-image: linear-gradient(0deg, #EAEEF3 0%, #FFFFFF 100%)
    border: 1px solid $border
    color: $color-secondary
    border-radius: 4px

    &.black
      background: $black
      color: $white
      border-color: $black

    &.green
      background-image: linear-gradient(-1deg, #1E930B 3%, #1E9D09 100%)
      color: $white

    &.red
      background: linear-gradient(to bottom, #EC4249, #BD0C13)
      border: 1px solid #BD0C13
      color: $white

    &.blue
      background-image: linear-gradient(-180deg, #1584D7 5%, #2184CF 98%);
      border-color: #0C73C1
      color: $white

    &.yellow
      background: linear-gradient(to bottom, #F09219, #E96012)
      border-color: #F09219
      color: $white

    &.dark
      background: $header-background-dark
      color: $white
      border-color: $header-background-dark

  &:active, &.is-active
    color: $color-secondary

  &[disabled]
    background: #E9EDF1
    border: 1px solid #DFE3E9
    pointer-events: none
    color: $color

  img
    width: 14px
    height: 14px
    margin-right: 5px

  i
    display: block
    float: left
    margin-top: -2px
    margin-right: 10px
    font-size: 18px

.button-item
  width: 24px
  img
    width: 10px

.group-buttons
  display: flex
  justify-content: center
  align-items: center

  .group-button
    height: 36px
    background: $header-background-dark
    border: 1px solid $header-background
    color: $white
    padding: 6px  12px
    font-family: $font-family-bold
    font-weight: 700
    text-transform: uppercase
    font-size: 11px
    outline: none
    cursor: pointer
    display: inline-flex
    align-items: center

    i
      display: block
      float: left
      margin-top: -2px
      margin-right: 10px
      font-size: 18px

    &:first-child
      border-top-left-radius: 4px
      border-bottom-left-radius: 4px

    &:last-child
      border-top-right-radius: 4px
      border-bottom-right-radius: 4px

    &.is-active, &:hover
      background: $header-background
      border: 1px solid $header-background

  &.bright

    .group-button
      background-image: linear-gradient(0deg, #F7FBFD 0%, #FFFFFF 100%)
      border: 1px solid $border
      color: $color-secondary
      margin-left: 5px
      border-radius: 4px
      height: 30px
      display: inline-flex
      align-items: center
      padding: 0 10px
      line-height: 1.8

      &.is-active, &:hover
        background: $white
        border: 1px solid $border
        color: $color-secondary

  &.small

    .group-button
      height: 26px
      padding: 3px 8px
      font-size: 12px
      text-transform: none

.w200
  max-width: 200px