[data-placement^="top"] {
  transform-origin: bottom; /* border-top-width: 4px; */

  & .p8n-arrow {
    @apply drop-shadow-arrow dark:drop-shadow-arrow-dark absolute top-full h-0 w-0 border-x-8 border-t-8 border-x-transparent border-t-current;
    clip: rect(0px, 16px, 12px, 0px);
  }
}

[data-placement="top-start"] {
  transform-origin: bottom left;
}

[data-placement="top-end"] {
  transform-origin: bottom right;
}

[data-placement^="bottom"] {
  transform-origin: top;

  & .p8n-arrow {
    @apply drop-shadow-arrow dark:drop-shadow-arrow-dark absolute bottom-full h-0 w-0 border-x-8 border-b-8 border-x-transparent border-b-current;
    clip: rect(-4px, 16px, 8px, 0px);
  }
}

[data-placement="bottom-start"] {
  transform-origin: top left;
}

[data-placement="bottom-end"] {
  transform-origin: top right;
}

[data-placement^="left"] {
  transform-origin: right;

  & .p8n-arrow {
    @apply drop-shadow-arrow dark:drop-shadow-arrow-dark absolute left-full h-0 w-0 border-y-8 border-l-8 border-y-transparent border-l-current;
    clip: rect(0px, 12px, 16px, 0px);
  }
}

[data-placement="left-start"] {
  transform-origin: top right;
}

[data-placement="left-end"] {
  transform-origin: bottom right;
}

[data-placement^="right"] {
  transform-origin: left;
  & .p8n-arrow {
    @apply drop-shadow-arrow dark:drop-shadow-arrow-dark absolute right-full h-0 w-0 border-y-8 border-r-8 border-y-transparent border-r-current;
    clip: rect(0px, 8px, 16px, -4px);
  }
}

[data-placement="right-start"] {
  transform-origin: top left;
}

[data-placement="right-end"] {
  transform-origin: bottom left;
}

[data-color="yellow"] .p8n-arrow {
  @apply text-gray-0;
}

[data-color="gray"] .p8n-arrow {
  @apply text-gray-0;
}

[data-color="red"] .p8n-arrow {
  @apply text-red-1;
}

[data-color="orange"] .p8n-arrow {
  @apply text-orange-1;
}

[data-color="blue"] .p8n-arrow {
  @apply text-blue-1;
}

[data-color="green"] .p8n-arrow {
  @apply text-green-1;
}

.option[data-nested][data-open]:not([data-focus-inside]) {
  @apply bg-gray-2;
}

.option[data-focus-inside][data-open] {
  @apply bg-gray-1;
}