.noora-checkbox {
  & [data-part="root"] {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
    grid-template-areas:
      "control label"
      ".       description";
    justify-content: center;
    align-items: start;
    user-select: none;

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

  & [data-part="control"] {
    display: flex;
    grid-area: control;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    margin-top: 2px;
    border-radius: var(--noora-radius-small);
    width: 16px;
    height: 16px;
    color: var(--noora-choice-selector-label);

    & svg {
      width: 12px;
      height: 12px;
    }

    &[data-disabled] {
      box-shadow: var(--noora-border-light-default);
      background: var(--noora-choice-selector-disabled-background);
    }

    &[data-focus] {
      box-shadow: var(--noora-border-light-focus) !important;
    }

    &:not([data-state="checked"]),
    &:not([data-state="indeterminate"]) {
      & [data-part="check"] {
        display: none;
      }

      & [data-part="minus"] {
        display: none;
      }
    }

    &:not([data-disabled])[data-state="unchecked"] {
      box-shadow: var(--noora-border-light-default);
      background: var(--noora-choice-selector-uncheck-background);

      &[data-hover] {
        background: var(--noora-choice-selector-uncheck-background-hover);
      }
    }

    &[data-state="checked"],
    &[data-state="indeterminate"] {
      box-shadow: 0px 1px 0px 0px oklch(100% 0 0 / 0.2) inset;
      border: 1px solid var(--noora-purple-500);
      background: var(--noora-choice-selector-check-background);

      &[data-hover] {
        background: var(--noora-choice-selector-check-background-hover);
      }
    }

    &[data-state="checked"] {
      & [data-part="check"] {
        display: flex;
      }
    }

    &[data-state="indeterminate"] {
      & [data-part="minus"] {
        display: flex;
      }
    }
  }

  & [data-part="label"] {
    display: flex;
    grid-area: label;
    margin-left: var(--noora-spacing-5);
    color: var(--noora-surface-label-primary);
    font: var(--noora-font-body-medium);

    &:has(+ [data-part="description"]) {
      font: var(--noora-font-weight-medium) var(--noora-font-body-medium);
    }
  }

  & [data-part="description"] {
    display: flex;
    grid-area: description;
    margin-top: var(--noora-spacing-2);
    margin-left: var(--noora-spacing-5);
    color: var(--noora-surface-label-secondary);
    font: var(--noora-font-body-small);
  }

  & [data-part="hidden-input"]:not([value]) {
    display: none;
  }
}