@harvest-profit/npk/dist/Checkbox/Checkbox.module.css

NPK UI Design System

.Checkbox {
  height: calc(var(--control-size) / 2);
  width: calc(var(--control-size) / 2);
  cursor: pointer;
  position: relative;
  z-index: 0;
}

.Checkbox[aria-checked="true"] {
    color: var(--control-bg-color--active-element);
  }

.Checkbox[aria-checked="false"] {
    color: var(--color-neutral-30);
  }

.Checkbox[aria-checked="mixed"] {
    color: var(--control-bg-color--active-element);
  }

.Checkbox[aria-disabled="true"] {
    cursor: not-allowed;
    color: var(--color-neutral-50);
  }

.Label {
  display: flex;
  flex-direction: row;
  gap: var(--control-gap);
}

.Label .Checkbox {
    order: 1;
    margin-top: 2px;
  }

.Label [data-component="label"] {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 4px;
    font-size: var(--control-label-font-size);
    font-weight: var(--control-label-weight);
    color: var(--control-fg-color);
  }

:is(.Label [data-component="label"]) > [data-component="label-contents"] {
      display: flex;
      flex-direction: column;
    }

:is(.Label [data-component="label"]) h1,:is(.Label [data-component="label"]) h2,:is(.Label [data-component="label"]) h3,:is(.Label [data-component="label"]) h4,:is(.Label [data-component="label"]) h5,:is(.Label [data-component="label"]) h6 {
      margin: 0;
      color: var(--control-fg-color);
      font-size: var(--control-font-size);
      font-weight: var(--control-label-weight);
    }

:is(.Label [data-component="label"]) p {
      font-weight: normal;
      font-size: calc(var(--control-label-font-size) - 1px);
      line-height: var(--control-label-font-size);
      margin-top: calc(var(--control-gap) / 2);
      margin-bottom: var(--control-gap);
      color: var(--control-fg-color);
    }

.Label [data-component="label-description"] {
    margin-top: calc(var(--control-gap) / 2 * -1);
    font-size: calc(var(--control-label-font-size) - 1px);
    line-height: var(--control-label-font-size);
    color: var(--control-fg-color);
    font-weight: normal;
  }