/* checkboxes */

.checkbox {
  position: relative;

  & label {
    position: relative;
    margin-bottom: var(--hiq-checkbox-margin-bottom);
    padding: 0 var(--hiq-checkbox-label-padding-horizontal);
    font-weight: var(--hiq-checkbox-label-font-weight) !important;
    line-height: 1;
    cursor: pointer;
    user-select: none;

    /* style `::before` to appear like checkbox */
    &::before {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: var(--hiq-checkbox-width);
      height: var(--hiq-checkbox-height);
      border: var(--hiq-checkbox-border-width) solid var(--hiq-checkbox-border-color);
      border-radius: var(--hiq-checkbox-border-radius);
      background-color: var(--hiq-checkbox-background-color);
      transition: background-color var(--hiq-speed) var(--hiq-easing);
      content: '';
    }
  }

  /* visually hide input */
  & input[type='checkbox'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;

    &:hover + label::before {
      background-color: var(--hiq-checkbox-hover-background-color);
    }

    &:focus + label::before {
      background-color: var(--hiq-checkbox-focus-background-color);
      outline: var(--hiq-outline-color) solid var(--hiq-outline-width);
    }

    &:checked + label::before,
    &[aria-checked] + label::before,
    &:indeterminate + label::before {
      border-color: var(--hiq-checkbox-checked-border-color);
      background-color: var(--hiq-checkbox-checked-background-color);
    }

    /* style `::after` to look like check mark */
    &:checked + label::after,
    &[aria-checked] + label::after {
      display: block;
      position: absolute;
      top: 50%;
      left: calc(var(--hiq-checkbox-width) / 2);
      width: var(--hiq-checkbox-check-width);
      height: var(--hiq-checkbox-check-height);
      border: solid var(--hiq-checkbox-check-color);
      border-width: 0 var(--hiq-checkbox-check-border-width) var(--hiq-checkbox-check-border-width) 0;
      transform: rotate(45deg) translate(-50%, -50%);
      transform-origin: 50% 0;
      content: '';
    }

    &:indeterminate + label::after {
      display: block;
      position: absolute;
      top: 50%;
      left: calc(var(--hiq-checkbox-width) / 2);
      width: var(--hiq-checkbox-indeterminate-width);
      height: var(--hiq-checkbox-check-border-width);
      background-color: var(--hiq-checkbox-check-color);
      transform: translate(-50%, -50%);
      content: '';
    }

    &:--not-writable + label {
      color: var(--hiq-disabled-text-color);
    }

    &:disabled,
    &[aria-disabled] {
      cursor: not-allowed;
    }

    &:--not-writable + label::before {
      background-color: var(--hiq-disabled-background-color);
    }
  }
}
