@import "../css/colors"
@import "../css/vars"

:local(.wrapper)
  position: relative
  display: block

:local(.input)
  display: none

:local(.label)
  position: relative
  display: inline-block
  color: $textGray
  font-family: $sansserif
  font-size: 16px
  padding-left: 35px
  user-select: none

  &:before
    top: -3px
    z-index: 2
    position: absolute
    left: 0
    bottom: 0
    color: $textGray
    content: $doka-icon-unchecked
    font-family: "doka_Iconfont"
    font-size: 30px
    font-style: normal
    font-weight: normal
    vertical-align: bottom

:local(.input:checked+.label)
  &:before
    content: $doka-icon-checked

:local(.wrapper.partial .label)
  &:before
    content: $doka-icon-checkboxPartialSelect !important

:local(.input:disabled+.label)
  color: $middleGray

  &:before
    color: $middleGray

:local(.wrapper.readonly > .label)
  &:hover
    text-decoration: underline;

  &:after
    background-color: transparent


// Special styles for checkboxes in a filtered list.
:local(.filter)

  :local(.input:checked+.label)
    &:before
      //background-color: $blue
      color: $textGray

  :local(.input:disabled+.label)
    &:before
      background-color: $backgroundGray
      color: $lightGray

  :local(.wrapper)
    height: 40px

  :local(.label)
    display: block
    align-items: center
    box-sizing: border-box
    padding: 0 20px 0 40px
    height: 40px
    line-height: 40px
    font-size: 16px
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;


    &:before
      top: 0
      text-align: center;
      width: 40px;
      height: 100%;

    &:after
      display: none