.checkbox
  display inline-block
  position relative
  position relative
  cursor pointer
  user-select none
  user-select none

  &-element
    width 0
    height 0
    border-width 0
    outline none
    opacity 0
    position absolute

  &-container
    padding-left 29px
    position relative
    user-select none

    &__angle
      width 12px
      height 10px
      opacity 0
      visibility hidden
      position absolute
      top 5.5px
      left 4.5px
      z-index 3
      transition-timing-function ease-in-out
      transition-duration .3s
      transition-property stroke, opacity, visibility, stroke-dashoffset, stroke-dasharray
      stroke b2c-purple
      stroke-dashoffset 100px
      stroke-dasharray 20px

      .{newAppName}-dark-theme &
        stroke b2c-orange

    &:before
      content ""
      width 20px
      height 20px
      box-sizing border-box
      background-color b2c-white
      border 2px solid b2c-cool-grey
      position absolute
      top 0
      left 0
      z-index 2
      transition-timing-function cubic-bezier(.11, .34, .97, .33)
      transition-duration .3s
      transition-property background, border

      .{newAppName}-dark-theme &
        background-color transparent

    .checkbox-element:focus+&:before,
    .checkbox:hover &:before
      border-color b2c-purple

      .{newAppName}-dark-theme &
        border-color b2c-orange

    .checkbox-element:checked+&
      .checkbox-container__angle
        opacity 1
        visibility visible
        stroke-dashoffset 80px

    .checkbox-element[disabled]:checked+&
      .checkbox-container__angle
        opacity .4

    .checkbox-element[disabled]+&
      cursor default

      .{newAppName}-dark-theme &
        opacity .4

      &:before
        border-color b2c-cool-grey05

      color b2c-cool-grey

      &:before
        opacity 1
        visibility visible

      .checkbox-container__angle
        opacity 0
        visibility visible
        stroke main-color

      .{newAppName}-dark-theme &
        .checkbox-container__angle
          opacity .4
          visibility visible
          stroke main-color

.invalid .checkbox-container:before
  border-color error-color