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

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

+host-styles(mp-button-bar)
  display block
  height 48px
  width 100%

+host-context(mp-button-bar, mp-modal)
  margin-bottom -2px
  margin-left -1px
  width calc(100% + 2px)

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

  .container
    align-items center
    border-bottom-left-radius 5px
    border-bottom-right-radius 5px
    border-top 1px solid
    cursor pointer
    display inline-flex
    flex 1
    font-family $family-helvetica
    font-size-medium()
    font-weight $weight-bold
    height 100%
    justify-content center
    letter-spacing 0
    user-select none
    width 100%

    .content-wrapper
      display flex
      padding 0 12px

    .content
      align-items center
      display inline-flex
      justify-content center
      margin-top -2px
      max-width 100%

    +content-styles()
      svg-icon
        margin-right 6px

    {disabled}
      cursor default
      .content, .arrow-next
        opacity 0.6

    .arrow-next
      height 22px
      margin-left 6px
      width 18px

    &.blue, &.primary
      background-color $mp-blue
      border-color $blue-700
      content-color($white)

      &:hover{not-disabled}
        background-color $blue-100

      &:active{not-disabled}, &.active{not-disabled}
        background-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))

    &.grey, &.secondary
      background-color $grey-50
      border-color $grey-150
      content-color($grey-700)

      &:hover{not-disabled}
        background-color $white
        content-color($mp-blue)

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