:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  --neeto-ui-checkbox-size: 1rem;
  --neeto-ui-checkbox-color: rgb(var(--neeto-ui-primary-500));
  --neeto-ui-checkbox-border-width: 2px;
  --neeto-ui-checkbox-border-color: rgb(var(--neeto-ui-gray-400));
  --neeto-ui-checkbox-border-radius: var(--neeto-ui-rounded-sm);

  // Disabled
  --neeto-ui-checkbox-disabled-opacity: 0.5;

  // Hover
  --neeto-ui-checkbox-hover-border-color: rgb(var(--neeto-ui-gray-500));

  // Focus
  --neeto-ui-checkbox-focus-outline: transparent;
  --neeto-ui-checkbox-focus-outline-offset: 0px;

  // Focus Visible
  --neeto-ui-checkbox-focus-visible-outline: 3px solid rgba(var(--neeto-ui-primary-500), 50%);
  --neeto-ui-checkbox-focus-visible-outline-offset: 1px;
  --neeto-ui-checkbox-focus-visible-box-shadow: none;

  // Checked
  --neeto-ui-checkbox-checked-border-color: rgb(var(--neeto-ui-primary-500));

  // Margin
  --neeto-ui-checkbox-label-margin: 0.5rem;
  --neeto-ui-checkbox-label-line-height: 1.2;
}

.neeto-ui-checkbox__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-grow: 1;

  .neeto-ui-checkbox__container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: start;

    .neeto-ui-label {
      margin-left: var(--neeto-ui-checkbox-label-margin);
      line-height: var(--neeto-ui-checkbox-label-line-height);
    }

    .neeto-ui-checkbox[type="checkbox"] {
      width: var(--neeto-ui-checkbox-size);
      height: var(--neeto-ui-checkbox-size);
      color: var(--neeto-ui-checkbox-color);
      border: var(--neeto-ui-checkbox-border-width) solid var(--neeto-ui-checkbox-border-color);
      border-radius: var(--neeto-ui-checkbox-border-radius);

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

      &:hover:not(:disabled, :checked) {
        border-color: var(--neeto-ui-checkbox-hover-border-color);
      }

      &:checked {
        border-color: var(--neeto-ui-checkbox-checked-border-color);
        background-size: calc(var(--neeto-ui-checkbox-size) * 0.6875) calc(var(--neeto-ui-checkbox-size) / 2);
      }

      &:disabled {
        opacity: var(--neeto-ui-checkbox-disabled-opacity);
        cursor: not-allowed;
      }

      &:focus {
        outline: var(--neeto-ui-checkbox-focus-outline);
        outline-offset: var(--neeto-ui-checkbox-focus-outline-offset);
      }

      &:focus-visible {
        outline: var(--neeto-ui-checkbox-focus-visible-outline);
        outline-offset: var(--neeto-ui-checkbox-focus-visible-outline-offset);
        box-shadow: var(--neeto-ui-checkbox-focus-visible-box-shadow);
      }
    }
  }
}

// ant design checkbox override

.ant-checkbox {
  width: var(--neeto-ui-checkbox-size);
  height: var(--neeto-ui-checkbox-size);

  [type="checkbox"] {
    width: var(--neeto-ui-checkbox-size);
    height: var(--neeto-ui-checkbox-size);
    color: var(--neeto-ui-checkbox-color);
    border: var(--neeto-ui-checkbox-border-width) solid var(--neeto-ui-checkbox-border-color);
    border-radius: var(--neeto-ui-checkbox-border-radius);
    opacity: 1;

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

    &:hover:not(:disabled, :checked) {
      border-color: var(--neeto-ui-checkbox-hover-border-color);
    }

    &:checked {
      border-color: var(--neeto-ui-checkbox-checked-border-color);
      background-size: calc(var(--neeto-ui-checkbox-size) * 0.6875);
    }

    &:disabled {
      opacity: var(--neeto-ui-checkbox-disabled-opacity);
      cursor: not-allowed;
    }

    &:focus {
      outline: var(--neeto-ui-checkbox-focus-outline);
      outline-offset: var(--neeto-ui-checkbox-focus-outline-offset);
    }

    &:focus-visible {
      outline: var(--neeto-ui-checkbox-focus-visible-outline);
      outline-offset: var(--neeto-ui-checkbox-focus-visible-outline-offset);
      box-shadow: var(--neeto-ui-checkbox-focus-visible-box-shadow);
    }
  }

  .ant-checkbox-inner {
    display: none;
  }
}

.neetix-checkbox {
  --neeto-ui-checkbox-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-checkbox-focus-visible-outline: 3px solid rgba(var(--neeto-ui-gray-800), 50%);
  --neeto-ui-checkbox-checked-border-color: rgb(var(--neeto-ui-gray-800));
}
