// @see https://moderncss.dev/pure-css-custom-checkbox-style/
.agui-checkbox {
  cursor: pointer;

  appearance: none;
  background-color: var(--agui-c-bg);
  margin: 0;
  font: inherit;
  color: currentColor;

  width: 1rem;
  height: 1rem;

  border: 1px solid var(--agui-c-divider);
  border-radius: 2px;

  display: inline-grid;
  place-content: center;

  // checked style
  &::before {
    content: '';
    width: 8px;
    height: 8px;
    transform: scale(0);
    // transition: 120ms transform ease-in-out;

    background-color: white;

    // checkmark
    // transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }

  &:checked::before {
    transform: scale(1);
  }

  &:hover {
    border: 1px solid var(--agui-c-border-hover);
  }

  &:focus {
    outline: none;
    border: 1px solid var(--agui-c-focus);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}