html.should-upscale div.Preview-overlayLabel {
  @apply !translate-x-0 !translate-y-0 !scale-[calc(1_+_(1_-_var(--PreviewScale,1)))];
}

body.overlay-hidden .Preview-overlay {
  @apply invisible;
}

.is-previewToEditDisabled .Preview-overlayFrame {
  @apply hidden;
}

.Preview-overlayFrame {
  @apply [color-scheme:light];
}

.Page.is-inIframe {
  @apply h-auto *:bg-transparent;
}

/*
  All colors used are light-mode only colors since the Preview is always shown in light mode.
*/

.Preview-overlay {
  @apply absolute flex cursor-pointer flex-col bg-transparent opacity-0 [background-image:theme(backgroundImage.rect-outline-default)];

  &.is-visible,
  &.is-selected,
  &.is-hover {
    @apply opacity-100;
  }

  &.is-locked {
    @apply pointer-events-none bg-[color:oklch(theme(colors.gray.light.100))] opacity-70;
  }

  &:not(.is-locked).is-hover {
    @apply [background-image:theme(backgroundImage.rect-outline-hover)];

    > .Preview-overlayLabel {
      @apply bg-[color:oklch(theme(colors.gray.light.50))] text-[color:oklch(theme(colors.gray.light.700))];
    }
  }

  &:not(.is-locked).is-selected {
    @apply [background-image:theme(backgroundImage.rect-outline-active)];

    > .Preview-overlayLabel {
      @apply bg-[color:oklch(theme(colors.primary.light.50))] text-[color:oklch(theme(colors.primary.light.700))];
    }
  }

  &:not(.is-locked).is-shared {
    @apply [background-image:theme(backgroundImage.rect-outline-primary)];

    > .Preview-overlayLabel {
      @apply bg-[color:oklch(theme(colors.primary.light.600))] text-[color:theme(colors.white.light)];
    }
  }

  &.is-removed {
    @apply pointer-events-none invisible;
  }

  &.is-shared {
    @apply bg-transparent;
  }
}

.Preview-overlayLabel {
  @apply absolute z-[1] inline-flex w-max origin-top-left translate-x-0 translate-y-0 scale-[--PreviewScale] flex-row items-center bg-[color:theme(colors.white.light)] px-2 py-0.5 text-xs font-medium capitalize text-[color:oklch(theme(colors.gray.light.500))];
}

.Preview-overlayTooltip {
  --tooltip-scale: 1;
  --tooltip-tail-size: calc(7px * var(--tooltip-scale));
  --tooltip-tail-bottom: conic-gradient(
      from -30deg at bottom,
      #0000,
      #000 1deg 60deg,
      #0000 61deg
    )
    bottom / 100% calc(var(--tooltip-tail-size) + 1px) no-repeat;
  --tooltip-tail-top: conic-gradient(
      from 150deg at top,
      #0000,
      #000 1deg 60deg,
      #0000 61deg
    )
    top / 100% calc(var(--tooltip-tail-size) + 1px) no-repeat;
  --tooltip-bg: oklch(theme(colors.gray.light.900));
  --tooltip-shape: var(--tooltip-tail-top);
  --tooltip-y: calc(3px * var(--tooltip-scale));

  @apply pointer-events-none absolute z-10 m-0 grid min-w-fit origin-left translate-x-[calc(-1px_*_var(--tooltip-scale))] translate-y-[var(--tooltip-y,0)] scale-[--tooltip-scale] select-none gap-2 rounded-lg bg-[--tooltip-bg] p-3 text-start text-md opacity-0 shadow-2xl drop-shadow-md transition-[opacity_0.15s_ease_transform_0.15s_ease] [inline-size:max-content] [inset-block-end:calc(100%_+_calc(0.75ch_*_var(--tooltip-scale)))] [inset-inline-start:0%] [line-height:initial] [max-inline-size:25ch];

  &::after {
    /* inset moves the tail to the right */
    @apply absolute z-[-1] bg-[--tooltip-bg] content-[''] [-webkit-mask:--tooltip-shape] [border-block-end:var(--tooltip-tail-size)_solid_transparent] [inset:0_0_0_calc(-100%_+_calc(var(--tooltip-tail-size)_*_4))] [mask:--tooltip-shape];
  }

  &:is([position='top']) {
    --tooltip-shape: var(--tooltip-tail-bottom);
    @apply after:[border-block-end:--tooltip-tail-size_solid_transparent] after:[inset-block-end:calc(var(--tooltip-tail-size)_*_-1)];
  }

  &:is([position='bottom']) {
    --tooltip-shape: var(--tooltip-tail-top);
    @apply [inset-block-end:auto] [inset-block-start:calc(100%_+_var(--tooltip-tail-size))] after:[border-block-start:--tooltip-tail-size_solid_transparent] after:[inset-block-start:calc(var(--tooltip-tail-size)_*_-1)];
  }

  &.is-grid {
    @apply grid grid-cols-[1fr_1fr] justify-items-end gap-[3px] text-nowrap text-xs text-[color:theme(colors.white.light)];

    /* first column */
    :nth-child(odd) {
      @apply justify-self-start font-medium capitalize;
    }

    /* second column */
    :nth-child(even) {
      @apply justify-self-end font-normal;
    }
  }
}

.Preview-imageOverlay {
  @apply bg-transparent;

  &:is(.is-visible, :hover, :focus-visible, :active) > .Preview-overlayTooltip {
    @apply opacity-100 delay-150 [--tooltip-y:calc(-1px)];
  }
}
