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

$icon-size = 18px
$animation-time = 100ms

+host-styles(mp-checkbox)
  box-sizing border-box
  color $grey-700
  display block
  font-size-small()
  font-weight $weight-medium
  width 100%

+prefix-classes('mp-checkbox-')
  .wrapper
    align-items center
    display flex

  .icon
    background-color $white
    border 1px solid $grey-200
    border-radius 3px
    box-sizing border-box
    flex none
    height $icon-size
    margin-right 10px
    overflow hidden
    position relative
    svg-icon-style($grey-900, pos-left: -3px, pos-top: -3px)
    transition background-color $animation-time, border-color $animation-time
    width $icon-size

    .disabled &
      background-color $grey-300
      border-color $grey-300

    svg
      animation zoomIn $animation-time forwards
      opacity 0
      transform-origin center

  .label
    align-items center
    display flex
    flex-grow 1
    font-size inherit
    font-weight inherit
    overflow hidden
    text-align left
    text-overflow ellipsis
    white-space nowrap

@keyframes zoomIn
  0%
    transform scale(0)
  80%
    transform scale(1.1)
  100%
    transform scale(1)
    opacity 1