/*------------------------------------
  Checkboxes
------------------------------------*/

.u-check {
  position: relative;
  cursor: pointer;

  &-icon {
    // Icon Font
    &-font {
      display: inline-block;
      font-size: 0;
      padding-left: 1px;
      padding-right: 1px;

      i {
        font-size: 22px;
        color: $g-color-gray-light-v2;

        &::before {
          content: attr(data-uncheck-icon);
        }
      }
    }
    // End Icon Font

    &-checkbox,
    &-radio {
      display: inline-block;
    }
  }

  // Control
  input[type="checkbox"],
  input[type="radio"] {
    &:checked {
      & +,
      & + * {
        // Icon Font
        .u-check-icon-font {
          i {
            color: $g-color-primary;

            &::before {
              content: attr(data-check-icon);
            }
          }
        }
        // End Icon Font
      }
    }
  }
}

.g-hide-check {
  display: block !important;

  .g-checked > * &,
  input[type="checkbox"]:checked + &,
  input[type="radio"]:checked + &,
  input[type="checkbox"]:checked + * &,
  input[type="radio"]:checked + * & {
    display: none !important;
  }
}

.g-show-check {
  display: none !important;

  .g-checked > * &,
  input[type="checkbox"]:checked + &,
  input[type="radio"]:checked + &,
  input[type="checkbox"]:checked + * &,
  input[type="radio"]:checked + * & {
    display: block !important;
  }
}

//
// Imports
//
@import "checkboxes-v1";
@import "checkboxes-v2";
@import "checkboxes-v3";
@import "checkboxes-v4";
@import "checkboxes-v5";
@import "checkboxes-v6";
@import "checkboxes-v7";
@import "checkboxes-v8";

/* P */
[class*="u-checkbox-v1"] {
  display: none;
}

[class*="u-checkbox-v1"] + label {
  cursor: pointer;
}

.u-checkbox-v1--checked-color-primary:checked + label {
  color: $g-color-primary !important;
}

.u-checkbox-v1--checked-brd-primary:checked + label {
  border-color: $g-color-primary !important;
}