@import 'colours'
@import 'variables'
@import 'mixins'

$toggle-background: rgba($gray, .2)
$toggle-enabled-background: $green
$toggle-container-height: $input-height - 10px

\:host
  height: $toggle-container-height

  @each $name, $color in $colors
    &.is-#{$name}
      .toggle-button

        &.enabled
          background: $color

.toggle-container
  +unselectable
  display: inline-flex
  align-items: center
  height: $toggle-container-height

  .toggle-button
    width: 42px
    height: 22px
    background: $toggle-background
    border: 1px solid $border-default
    border-radius: 40px
    position: relative
    cursor: pointer
    transition: all 300ms ease-in-out
    display: inline-block

    &.enabled
      background: $toggle-enabled-background
      border: 1px solid $toggle-enabled-background

      .toggle-circle
        left: 21px

    .toggle-circle
      border-radius: 83px
      width: 18px
      height: 18px
      position: absolute
      top: 1px
      left: 2px
      background: $background
      transition: all 200ms ease

  .label
    display: inline-block
    margin-left: 15px
    height: 22px
