@import "var";

.@{uiName} {
  &-checkbox {
    width: @checkboxSize;
    height: @checkboxSize;
    margin-right: @formPadding;
    position: relative;
  }
  &-checkbox-input {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 1;
  }
  &-checkbox-inner {
    width: 100%;
    height: 100%;
    position: relative;
    &:before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      border: 1px solid @themeColor;
      border-radius: 100%;
    }
    &:after {
      position: absolute;
      display: none;
      top: 50%;
      left: 50%;
      margin-left: -(@checkboxInnerSize/4);
      margin-top: -(@checkboxInnerSize/2);
      width: @checkboxInnerSize/2;
      height: @checkboxInnerSize;
      border-style: solid;
      border-width: 0 2px 2px 0;
      border-color: #ffffff;
      content: " ";
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  }
  &-checkbox-input:checked + &-checkbox-inner {
    &:before {
      background: @themeColor;
    }
    &:after {
      display: block;
    }
  }
}
.checkbox-height {
  padding: 12px;
  height: auto;
}
.checkbox-secondaryText{
  color: #768893;
  font-size: 14px;
}