/* normal */
:is(
  /* ... keep the layout */
  .p8n-input-checkbox,
  .p8n-input-toggle,
  .p8n-input-radio,
  .p8n-input-text,
  .p8n-textarea
  ):not([data-variant="ghost"]) {
  @apply border-custom-2 bg-gray-0/50 border;
}
.p8n-editor-input {
  @apply bg-gray-0/50;
}

/* survol */
:is(
  .p8n-input-checkbox:not(:checked, .checked),
  .p8n-input-toggle:not(:checked, .checked),
  .p8n-input-radio:not(:checked, .checked)
) {
  @apply hover:bg-custom-1/50;
}
:is(.p8n-input-text, .p8n-textarea, .p8n-editor-input) {
  @apply hover:bg-gray-0; /* except when focus see below */
}

/* focus */
:is(
    .p8n-input-checkbox:focus,
    .p8n-input-toggle:focus,
    .p8n-input-radio:focus,
    .p8n-input-text:has(input:focus-visible),
    button.p8n-input-text:focus, /* InputButton */
    div.p8n-input-text:focus, /* Select */
    .p8n-input-text.focus,
    .p8n-textarea:has(textarea:focus-visible)
  ):not([data-variant="ghost"]) {
  @apply outline-custom-4 border-transparent outline-2 outline-offset-0;
}
:is(
  /* ... keep the layout */
  .p8n-input-text:has(input:focus-visible),
  button.p8n-input-text:focus,
  .p8n-textarea:has(textarea:focus-visible),
  .p8n-editor-input:focus-visible
) {
  @apply bg-gray-0;
}

:is(.p8n-input-checkbox, .p8n-input-toggle, .p8n-input-radio) {
  @apply text-custom-3;
}

:is(.p8n-input-checkbox, .p8n-input-radio):is(:checked, .checked, .indeterminate) {
  @apply border-custom-4 bg-current bg-center bg-no-repeat;
  background-size: 100%;
}
.p8n-input-radio,
.p8n-input-checkbox {
  position: relative;
}
.p8n-input-radio::after,
.p8n-input-checkbox::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: scale(0);
  transition: transform 0.15s;
}
.p8n-input-checkbox:where(:checked, .checked)::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' 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");
  transform: scale(1);
}

.p8n-input-radio:where(:checked, .checked)::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  transform: scale(1);
}
:is(.p8n-input-checkbox, .p8n-input-radio):is(.indeterminate, :checked.indeterminate)::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.5 7.5a1 1 0 0 0-1 1 1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1 1 1 0 0 0-1-1Z' /%3e%3c/svg%3e");
  transform: scale(1);
}