// Import bulma utilities
@import '_bulma_utitlities.sass'

.toggle
  user-select: none
  cursor: pointer
  display: inline-block
  *
    cursor: pointer
  & > [type="checkbox"]
    display: inline-block
    position: relative
    appearance: none
    z-index: 1
    width: 3.5em
    height: 1.5em
    top: 0.25em
    padding: 0
    margin: 0
    visibility: hidden
    &:disabled
      cursor: not-allowed
      &:before
        opacity: 0.75
        border-color: $grey-light!important
      &:after
        background-color: $grey-light!important
      &:checked
        &:before
          background-color: $grey-light!important
          border-color: $grey-light!important
        &:after
          background-color: $white!important
    &:before
      visibility: visible
      content: ''
      height: 100%
      width: 100%
      position: absolute
      top: 0
      left: 0
      background-color: $white
      border: 2px solid $border
      border-radius: 10px
    &:after
      visibility: visible
      content: ''
      position: absolute
      left: 10%
      top: 20%
      border-radius: 50%
      height: 60%
      width: 25%
      background-color: $dark
      transition: left 0.25s ease-out
    &:checked
      &:before
        background-color: $primary
        border-color: darken($primary, 1%)
      &:after
        left: 65%
        background-color: #fff
  &:hover
    & > [type="checkbox"]:not(:disabled)
      &:before
        border-color: rgba(0,0,0,0.5)
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    .toggle
      &.is-#{$name}
        & > [type="checkbox"]
          &:checked
            &:before
              background-color: $color
              border-color: darken($color, 1%)