@layer base {
  [type='password'] {
    font: caption;
    line-height: 1.5;
    letter-spacing: 1px;
  }
  [type='checkbox']:focus,
  [type='radio']:focus {
    --tw-ring-inset: inset;
  }
  [type='checkbox']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23165780' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-color: white;
    border-color: theme(colors.primary.700);
  }
  [type='radio']:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23165780' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    background-color: white;
    border-color: theme(colors.primary.700);
  }
  [type='checkbox']:checked:hover,
  [type='checkbox']:checked:focus,
  [type='radio']:checked:hover,
  [type='radio']:checked:focus {
    border-color: theme(colors.primary.300);
    background-color: transparent;
  }
}