@import "~assets/css/vars"

.checkbox,
.radio
  + .radio,
  + .checkbox
    margin-left: 1rem
  &.custom
    position: relative
    padding-left: 1.25rem
  .custom
    position: absolute
    top: 0
    left: 0
    z-index: -1
    opacity: 0
    ~ .indicator
      position: absolute
      width: 1rem
      height: 1rem
      top: .1rem
      left: 0
      pointer-events: none
      user-select: none
      background: 50% 50% no-repeat $grey-light
      background-size: 50% 50%
      ~ .input-label
        display: block
        position: relative
        user-select: none
      &::after
        position: absolute
        content: ''
        width: 100%
        height: 100%
        top: 0
        left: 0
        background-color: $white
        transition: background-color .4s, transform .4s, opacity .4s
        opacity: 0
    &:checked
      ~ .indicator
        background-color: $primary
        &::after
          opacity: 1

.radio .custom:checked ~ .indicator::after
  transform: scale(.4)

.checkbox .custom:checked ~ .indicator::after
  transform: scale(.6)

.is-success
  .checkbox,
  .radio
    .custom
      &:checked
        ~ .indicator
          background-color: $success

.is-danger
  .radio .custom ~ .indicator
    background-color: $danger
  .checkbox .custom ~ .indicator
    background-color: $danger

.radio
  .custom
    ~ .indicator
      border-radius: 50%
      &::after
        border-radius: 50%
    &:checked
      ~ .indicator
        &::after
          border-radius: 50%

.checkbox
  margin-top: .5rem
  .custom
    &:checked
      ~ .indicator
        &::after
          transform: scale(.6)
          background-color: transparent
          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E")