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

+host-styles(mp-toggle)
  display inline-block

.mp-toggle
  background-color $grey-100
  border-radius 50px
  box-shadow inset 0 1px 0 0 $grey-200
  display flex
  height 32px
  padding 3px

  .mp-toggle-option
    align-items center
    background-color $grey-100
    border-radius 50px
    color $grey-700
    display flex
    flex-basis 0
    flex-grow 1
    font-size 11px
    font-weight bold
    height 100%
    justify-content center
    text-align center
    text-transform uppercase
    transition background-color 0.2s

    &.mp-toggle-selected
      background-color $white
      box-shadow 0 1px 0 0 (rgba(0, 0, 0, 0.05))
      color $grey-900

    &.mp-toggle-disabled
      opacity 0.2
      pointer-events none

    &:not(.mp-toggle-selected),
    &:not(.mp-toggle-disabled)
      cursor pointer

      &:hover
        color $blue-300

    &.mp-toggle-text-and-icon
      .hidden
        visibility hidden

      .toggle-text
        margin 0 5px

  &.toggle-blue
    background-color $blue-700
    box-shadow inset 0 1px 0 0 $blue-900

    .mp-toggle-option
      background-color $blue-700
      color lighten($blue-100, 50%)

      &.mp-toggle-selected
        background-color $blue-100
        color $white

      &:not(.mp-toggle-selected):hover
        color $white

  &.toggle-large
    height 39px

  &.toggle-small
    height 29px


  &.toggle-square
    background-color $white
    border-radius 4px
    box-shadow none
    box-sizing border-box
    padding 0

    .mp-toggle-option
      background-color $white
      border 1px solid $grey-200
      border-radius 0
      border-right-width 0

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

      &:last-child
        border-radius 0 3px 3px 0
        border-right-width 1px

      &.mp-toggle-selected
        background-color $blue-300
        border-color $blue-500
        border-right-width 1px
        color $white

        & + .mp-toggle-option
          border-left-width 0

    &.toggle-grey
      .mp-toggle-selected
        background-color $grey-50
        border-color $grey-200
        color $grey-900

  &.theme-lite
    background-color transparent
    border-bottom 1px solid $grey-200
    border-radius 0
    box-shadow none
    box-sizing border-box
    height 39px
    padding 0

    &.toggle-large
      height 60px

    .mp-toggle-option
      background-color transparent
      border-radius 0
      color $grey-500
      flex-basis auto
      margin-right 10px

      &:first-child
        margin-left 10px

      &.mp-toggle-selected
        box-shadow inset 0 -2px 0 0 $blue-300
        color $grey-700

  .mp-toggle-option.mp-toggle-error
      color $mp-red

      &.mp-toggle-selected
        color $mp-red

      &:not(.mp-toggle-disabled):hover
        color $red-700

  // Icon Styling
  .mp-toggle-option
    svg-icon-style($grey-700)

    &:hover
      svg-icon-style($mp-blue)

    &.mp-toggle-selected
      svg-icon-style($grey-900)