@use "../../assets/scss/mixins/_font-size.scss";

//custom LABEL
.bimdata-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--primary-font);
  font-size: font-size.calculateEm(14px);
  cursor: pointer;
  user-select: none;
  :after,
  :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  // custom CHECKMARK
  &__mark {
    width: 13px;
    height: 13px;
    position: relative;
    top: 0;
    left: 0;
    border: solid 1px var(--color-primary);
    border-radius: 2px;
    box-sizing: border-box;
    &::after {
      width: 4px;
      height: 7px;
      content: '';
      display: block;
      position: absolute;
      top: 1px;
      left: 3px;
      border: solid transparent;
      opacity: 0;
      transform: rotate(45deg);
    }
  }
  // custom TEXT CHECKBOX
  &__text {
    width: calc(100% - 13px - 5px);
    margin-left: 6px;
    font-size: font-size.calculateEm(12px);
  }
}

/* custom CHECKMARK CHECKED ------------------------------------ */
.bimdata-checkbox.checked > .bimdata-checkbox__mark,
.bimdata-checkbox.indeterminate > .bimdata-checkbox__mark {
  background-color: var(--color-primary);
}
.bimdata-checkbox:not(.indeterminate):not(.checked)
  > .bimdata-checkbox__mark::after {
  border-color: transparent;
}
.bimdata-checkbox:not(.indeterminate) > .bimdata-checkbox__mark::after,
.bimdata-checkbox.checked > .bimdata-checkbox__mark::after {
  border: solid 1px var(--color-white);
  border-left: none;
  border-top: none;
  border-width: 0 1px 1px 0;
  opacity: 1;
}
/* custom CHECKMARK INDETERMINATE ------------------------------ */
.bimdata-checkbox.indeterminate > .bimdata-checkbox__mark::after {
  border-width: 0 1px 0px 0;
  transform: rotate(90deg);
}
/* custom CHECKBOX DISABLED ----------------------------------- */
.bimdata-checkbox {
  &.disabled {
    cursor: default;
    & > .bimdata-checkbox__mark {
      border-color: var(--color-silver-dark);
    }
    > .bimdata-checkbox__text {
      color: var(--color-silver-dark);
    }
  }
  &.checked.disabled {
    & > .bimdata-checkbox__mark {
      background-color: var(--color-silver-dark);
    }
  }
}