@import (reference) "./../styles/variables/neptune-tokens.less";
@import (reference) "./../styles/less/mixins/_logical-properties.less";

.np-checkbox-button {
  input[type="checkbox"] {
    // Place the actual input on top of the SVG, so people using touch to find elements will still find it
    position: absolute;
    width: var(--size-24);
    height: var(--size-24);
    opacity: 0;

    &:not(:disabled) {
      cursor: pointer;
    }
  }

  .tw-checkbox-check, .np-tw-checkbox-indeterminate {
    pointer-events: none;
  }
}

.checkbox .np-checkbox-button {
  input[type="checkbox"] {
    top: 0;
    .left(0);

    margin: 0;
  }
}

.np-tw-checkbox-indeterminate {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 2px;
    top: 55%;
    left: 50%;
    background: var(--color-background-screen);
    transform: translate(-50%, -50%);
  }

  .has-error {
    &::after {
      background-color: var(--color-interactive-negative);
    }
  }
}