@import "../../styles/variables.scss";

.checkbox {
  cursor: pointer;
}

.checkbox:disabled {
  cursor: default;
}

.checkboxContainer {
  align-items: center;
  display: flex;
  position: relative;
  padding-left: $base-checkbox-size + $base-spacing + ($s-spacing / 2);
  margin-bottom: $base-spacing;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: $base-checkbox-size;

  /* Hide the browser's default checkbox */
  input {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    left: -9999px !important;

    /* When the radio button is checked, add blue border and background-color */
    &:checked ~ .customCheckbox {
      background-color: $brand-blue;
      border-color: $brand-blue;

      /* Show the indicator (checkmark) when checked */
      &:after {
        display: block;
      }
    }

    &:checked ~ .checkboxLabel {
      color: $brand-blue;
    }

    &:disabled ~ .customCheckbox {
      background-color: $brand-nearWhite;
      border-color: $brand-lightGrey;
      cursor: default;
    }

    &:disabled ~ .checkboxLabel {
      color: $brand-grey;
      cursor: default;
    }
  }

  /* On mouse-over, change border-color */
  &:hover input ~ .customCheckbox {
    border-color: $brand-blue;
  }

  &:hover input:checked ~ .customCheckbox {
    background-color: $brand-blue;
    border-color: $brand-blue;
  }

  &:hover input:disabled ~ .customCheckbox {
    border-color: $brand-lightGrey;
  }

  /* Style the indicator (checkmark) */
  .customCheckbox:after {
    top: $base-checkbox-size * 0.1;
    left: $base-checkbox-size * 0.3;
    width: $base-checkbox-size / 4;
    height: $base-checkbox-size / 2;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}

/* Create a custom checkbox */
.customCheckbox {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  height: $base-checkbox-size;
  width: $base-checkbox-size;
  border: 2px solid $brand-lightGrey;
  border-radius: $base-border-radius;

  /* Create the indicator (the checkmark - hidden when not checked) */
  &:after {
    content: "";
    position: absolute;
    display: none;
  }
}

.checkboxLabel {
  cursor: pointer;
}