// Buttons

button
  border: none

.button
  line-height: 35px

.button, button
  display: inline-block
  padding: 0 15px
  height: 35px
  background: $gray-lighter
  font-size: $font-size-small
  font-weight: $font-weight-bold
  text-align: center
  text-decoration: none
  color: $blue-saturated-light
  border: 1px solid $blue-saturated-lighter
  border-radius: 3px
  text-overflow: ellipsis
  vertical-align: middle
  user-select()

  &:focus
    outline: none

  &:hover:not(:disabled)
    color: $gray
    background: darken($gray-lighter, 10%)
    transition: all .3s ease-in

  &:disabled
    cursor: not-allowed
    color: lighten($gray-light, 40%)

  &.small
    height: 25px
    padding: 0 8px
    font-size: $font-size-small
    line-height: 25px

  &.large
    height: 50px
    line-height: 50px
    padding: 0 30px
    font-size: $font-size-large

  &.primary, &.secondary, &.primary:hover, &.secondary:hover
    color: white

  &.primary
    background: $green

    &:hover:not(:disabled)
      background: darken($green, 10%)

    &:disabled
      background: $green-light

  &.secondary
    background: $red

    &:disabled
      background: $red-light

    &:hover:not(:disabled)
      background: darken($red, 10%)

.button-group

  .button, button
    border-radius: 0
    margin-left: -1px

    &:first-child:only-child
      border-radius: 3px

    &:first-child
      border-radius: 3px 0 0 3px

    &:last-child
      border-radius: 0 3px 3px 0

  &.outlined
    display: inline-block
    border-radius: 3px

    button, .button
      border: 1px solid $gray-light

    &.primary

      button, .button
        background: $pink-lighter
        border: 1px solid $pink-light
        color: $pink

        &:hover
          background: lighten($pink-light, 40%)

    &.secondary

      button, .button
        background: $blue-lighter
        border: 1px solid $blue-light
        color: $blue

        &:hover
          background: lighten($blue-light, 40%)