@layer components {
  .checkbox-root {
    &[data-unchecked] {
      border: 1px solid var(--color-gray-300);
      background-color: transparent;
    }
    &[data-checked] {
      background-color: var(--brand-bg);
    }
  }
  .checkbox-indicator {
    display: flex;
    color: var(--color-gray-50);

    &[data-unchecked] {
      display: none;
    }
  }
}