@import '../../../../bootstrap/less/forms';

//
// Forms
// --------------------------------------------------

// Prevent checkbox and radio labels being highlighted accidentally when clicking
.checkbox, .radio {
  label { .user-select(none); }
}

// Form control feedback states - fix line-heights for font awesome
.form-control-feedback.fa {
  line-height: @input-height-base;
}
.input-lg + .form-control-feedback.fa,
.input-group-lg + .form-control-feedback.fa,
.form-group-lg .form-control + .form-control-feedback.fa {
  line-height: @input-height-large;
}
.input-sm + .form-control-feedback.fa,
.input-group-sm + .form-control-feedback.fa,
.form-group-sm .form-control + .form-control-feedback.fa {
  line-height: @input-height-small;
}
// Extra space for the select arrows
.has-feedback select.form-control + .form-control-feedback {
  right: floor((@grid-gutter-width / 2)) + 10px;
}

// Help text - hide if empty
.help-block:empty {
  margin-top: 0;
  margin-bottom: 0;
  visibility: hidden;
}
// Extra specificity to override non-variablised color in BS
.help-block {
  color: @text-muted;
  .has-success & {
    color: @state-success-text;
  }
  .has-warning & {
    color: @state-warning-text;
  }
  .has-error & {
    color: @state-danger-text;
  }
}

// Help text - fix spacing
.form-horizontal {
  .form-group {
    @media (min-width: @screen-sm-min) {
      .help-block:first-child {
        padding-top: (@padding-base-vertical + 1); // Default padding plus a border
        margin-top: 0;
      }
    }
  }
  // Form group sizes
  .form-group-lg {
    @media (min-width: @screen-sm-min) {
      .help-block:first-child {
        padding-top: (@padding-large-vertical + 1);
      }
    }
  }
  .form-group-sm {
    @media (min-width: @screen-sm-min) {
      .help-block:first-child {
        padding-top: (@padding-small-vertical + 1);
      }
    }
  }
}

.rounded-checkbox {
  position: relative;
  width: 20px;
  height: 20px;
  cursor: pointer;

  label {
    background-color: #FFF;
    border: 1px solid @gray;
    border-radius: 6px;
    height: 20px;
    width: 20px;
    left: 0;
    top: -10px;
    position: absolute;
    max-width: unset;

    &:after {
      border: 2px solid #FFF;
      border-top: none;
      border-right: none;
      content: "";
      left: 3px;
      top: 5px;
      opacity: 0;
      position: absolute;
      transform: rotate(-45deg);
      width: 12px;
      height: 6px;
    }
  }

  input {
    // So the checkbox remains a11y
    position: absolute;
    opacity: 0;
    z-index: -1;
  }

  input:checked + label {
    background-color: @brand-success;
    border-color: @brand-success;
  }

  input:checked + label:after {
    opacity: 1 !important;
  }
}