@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: -4px
    z-index: 2
    position: absolute
    left: 0
    bottom: 0
    color: $textGray
    content: $doka-icon-radiounchecked
    font-family: "doka_Iconfont"
    font-size: 30px
    font-style: normal
    font-weight: normal
    vertical-align: bottom

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

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

  &:before
    color: $middleGray

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

  &:after
    background-color: transparent