@import './base.less';

.@{css-prefix}.radio, .@{css-prefix}.checkbox {
  display: flex;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  outline: 0;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.2;
  align-items: center;
  //margin-right: .5em;

  span {
    padding: 0 8px;
    cursor: pointer;
    .user-select(none);
    line-height: 1.2;
  }

  &.active, &.open {
    > label:before {
      border-color: @primary-color;
    }
    > label:after {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 1em;
      content: ''!important;
      text-align: center;
      width: 1em;
      height: 1em;
      opacity: 1;
      transform: scale(.4555555);
      background: @primary-color;
    }
  }

  &.disabled {
    ._disabled;
    > label:before {
      background: #fdfdfd;
    }
  }

  input {
    opacity: 0!important;
    outline: 0;
    z-index: -1;
  }

  > label {
    display: block;
    cursor: pointer;
    line-height: 1.2;
    position: relative;
    height: 14px;

    &:hover {
      &:before {
        border-color: @primary-color;
      }
    }

    &:before {
      position: absolute;
      top: 0;
      left: 0;
      content: ''!important;
      background: #FFF;
      border-radius: 1em;
      transform: none;
      width: 1em;
      height: 1em;
      border: 1px solid #d9d9d9;
    }

  }

}

.@{css-prefix}.checkbox {
  &.active, &.open {
    > label:after {
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      transform: scale(.8222);
      color: #fff;
      border-radius: @border-radius;
    }
    > label:before {
      background: @primary-color;
    }
  }
  &.active {
    > label:after {
      content: '\f00c' !important;
    }
  }

  &.open {
    > label:before {
      background: @primary-color;
    }
  }

  > label {
    &:before {
      border-radius: @border-radius;
    }
  }
}

.@{css-prefix}.checkboxes, .@{css-prefix}.radios {
  &.vertical {
    .checkbox, .radio {
      flex-direction: row;
      margin-bottom: .5em;
    }
  }
  &.horizontal {
    display: flex;
    flex-direction: row;
  }
}