@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .decoration-opacity-30 {
    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  }

  .decoration-opacity-50 {
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  }

  .decoration-opacity-90 {
    text-decoration-color: color-mix(in srgb, currentColor 90%, transparent);
  }

  /* The data-popover-target="panel" declarations are to create the triangle indicator on the popover */
  [data-popover-target="panel"]::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: theme("spacing[2]");
    pointer-events: none;
  }

  [data-popover-target="panel"][data-popover-placement="top"]::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: inherit;
  }

  [data-popover-target="panel"][data-popover-placement="bottom"]::after {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: inherit;
  }

  [data-popover-target="panel"][data-popover-placement="left"]::after {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: inherit;
  }

  [data-popover-target="panel"][data-popover-placement="right"]::after {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: inherit;
  }
}