@import '../../../styles/definitions/typography';
@import '../../../styles/definitions/forms';

$checkbox-control-size-small: 14px;

.checkbox {
  &_container {
    & + & {
      margin-top: $form-checkbox-group-spacing;
    }
  }
  &_fieldset {
    @extend %form-fieldset;
  }

  &_legend {
    @extend %form-label;
  }
  
  &_label {
    display: inline-block;
    cursor: pointer;
  }
  
  &_control {
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);

    &:focus {
      & + .checkbox_text {
        &:before {
          border-color: $checkbox-control-active-bgcolor;
        }
      }
    }
  }

  &_text {
    @extend %form-checkbox-text;
    
    &:before {
      @extend %form-checkbox-before;
    }

    &:after {
      @extend %form-checkbox-after;
    }

    &--checked {
      &:before {
        @extend %form-checkbox-checked-before;
      }
      &:after {
        opacity: 1;
      }
    }

    &--small {
      font-size: $bodyFontSize6;
      padding-left: $checkbox-control-size-small + 10px;

      &:before {
        width: $checkbox-control-size-small;
        height: $checkbox-control-size-small;
      }
      &:after {
        left: $checkbox-control-size-small / 2;
      }
    }
    &--small#{&}--checked {
      &:before {
        border-width: $checkbox-control-size-small / 2;
      }
    }
    &--error {
      &:before {
        border-color: $form-error-color;
      }
    }
  }

  &_error {
    @extend %input-error;
  }
}
