@import '../../stylesheets/defaults'

content-color(color)
  +content-styles()
    color color
    svg-icon
      svg, path
        color color
        fill color
        transition 0s

icon-size(size=none, pos-left=0, pos-top=0)
  svg
    if size != none
      height size
      min-height size
      min-width size
      width size
    left pos-left
    top pos-top

+host-styles(mp-button)
  border-radius 5px
  display inline-block
  height 40px

+host-styles(mp-button, '[size="small"]')
  border-radius 3px
  height 32px

+prefix-classes('mp-button-')
  .container, .container *
    box-sizing border-box

  .container
    align-items center
    border 1px solid
    border-radius inherit
    cursor pointer
    display inline-flex
    font-family $family-helvetica
    font-weight $weight-bold
    height 100%
    justify-content center
    letter-spacing 0
    text-align center
    user-select none
    width 100%

    &.small
      font-size-default()
      padding 0 15px

    &.large
      box-shadow 0 1px 1px 0 alpha(black, 0.2)
      font-size-medium()
      padding 0 25px

    .content
      align-items center
      display inline-flex
      justify-content center
      line-height 18px

    {disabled}
      box-shadow none
      cursor default
      opacity 0.4

    /* BEGIN COLOR THEMES */

    &.primary, &.blue
      background-image linear-gradient(0deg, $mp-blue 0, $blue-100 100%)
      border-color $blue-500
      box-shadow 0 1px 1px 0 rgba(109, 133, 158, 0.5)
      content-color($white)

      &:hover{not-disabled}
        background-image linear-gradient(0deg, $blue-100 0, $blue-100 100%)
        box-shadow 0 2px 1px 0 rgba(155, 172, 191, 0.5)

      &:active{not-disabled}, &.active{not-disabled}
        border-color $mp-blue
        box-shadow 0 1px 1px 0 alpha(black, 0.0), inset 0 2px 2px 0 alpha(black, 0.2)
        content-color(alpha($white, 0.6))
        &.small
          background-color $mp-blue
        &.large
          background-image linear-gradient(0deg, $mp-blue 0, $blue-100 100%)

      &.on-blue
        border-color $blue-900
        box-shadow none

        &:hover{not-disabled}
          &.small
            background-color $mp-blue
          &.large
            background-image linear-gradient(0deg, $mp-blue 0, $blue-100 100%)
            box-shadow 0 1px 1px 0 alpha(black, 0.2)

        &:active{not-disabled}, &.active{not-disabled}
          border-color $blue-700
          &.large
            box-shadow 0 1px 1px 0 alpha(black, 0.0), inset 0 2px 2px 0 alpha(black, 0.2)

    &.secondary, &.grey
      border-color $grey-200
      content-color($grey-700)
      &.small
        background-color $white
        box-shadow 0 1px 1px 0 rgba(216, 224, 234, 0.5)
      &.large
        background-image linear-gradient(0deg, $grey-100 0, $white 100%)
        box-shadow 0 1px 1px 0 rgba(216, 224, 234, 0.5)

      &:hover{not-disabled}
        box-shadow 0 2px 1px 0 rgba(216, 224, 231, 0.5)
        content-color(mp-control-label-text-color())
        &.large
          background-image linear-gradient(0deg, $white 0, $white 100%)

      &:active{not-disabled}, &.active{not-disabled}
        border-color $grey-200
        box-shadow 0 1px 0 0 $grey-150, inset 0 2px 3px 0 $grey-200
        content-color(rgba(110, 133, 157, 0.8))

      &.on-blue
        border-color transparent
        box-shadow none
        content-color(alpha($white, 0.6))
        &.small
          background-color transparent
        &.large
          background-image none

        &:hover{not-disabled}
          border-color transparent
          box-shadow none
          content-color $white
          &.small
            background-color transparent
          &.large
            background-image none

        &:active{not-disabled}, &.active{not-disabled}
          background-color $mp-blue
          border-color transparent
          box-shadow none
          content-color(alpha($white, 0.6))

    &.red
      background-image linear-gradient(to top, $mp-red, $red-300)
      border-color $red-700
      box-shadow 0 1px 1px 0 rgba(109, 133, 158, 0.5)
      content-color($white)

      &:hover{not-disabled}
        background-image linear-gradient(0deg, $red-300 0, $red-300 100%)
        box-shadow 0 2px 1px 0 rgba(155, 172, 191, 0.5)

      &:active{not-disabled}, &.active{not-disabled}
        box-shadow 0 1px 1px 0 alpha(black, 0.0), inset 0 2px 2px 0 alpha(black, 0.2)
        content-color(alpha($white, 0.6))
        &.small
          background-color $mp-red
        &.large
          background-image linear-gradient(0deg, $mp-red 0, $red-300 100%)

    /* ICON STYLES */

    &.with-icon
      &.small
        padding 0 15px 0 8px
        svg-icon
          margin-right 2px

          &[icon='plus']
            icon-size(size: 22px, pos-top: -2px)

        svg-icon-style(size: 18px)

      &.large
        padding 0 25px 0 16px
        svg-icon-style(size: 22px)

        svg-icon
          margin-right 6px

          &[icon='x']
            margin-right 2px

          &[icon='plus']
            icon-size(size: 30px, pos-top: -4px)

          &[icon='caret-up'], &[icon='caret-down']
            margin-right 2px

      &.icon-only
        &.small, &.large
          svg-icon[icon]
            margin-right 0

        &.small
          padding 0 6px

        &.large
          padding 0 8px

    /* END ICON STYLES */