import { css } from 'chrome://resources/lit/v3_0/lit.rollup.js';
import './shared_vars.css.js';
let instance = null;
export function getCss() {
    return instance || (instance = [...[], css `
:host {
  display: block;
  left: 0;
  overflow: hidden;
  pointer-events: none; /* Let clicks pass through to PDF plugin */
  position: absolute;
  top: 0;
  z-index: 1; /* Position over the plugin so that the focus ring is visible. */
}

#container {
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 0; /* Give the container its own stacking context. */
}

.placeholder {
  position: absolute;
  pointer-events: auto;
  cursor: text;
  border: var(--viewer-text-annotation-border-width) solid transparent;
  box-sizing: border-box;
  outline: none;

  /* Default offsets for 0 and 180 (2) rotation */
  --offset-x: var(--viewer-text-annotation-offset-x);
  --offset-y: var(--viewer-text-annotation-offset-y);
  --padding-x: var(--viewer-text-annotation-padding-x);
  --padding-y: var(--viewer-text-annotation-padding-y);

  left: calc(var(--left) - var(--offset-x));
  top: calc(var(--top) - var(--offset-y));
  width: calc(var(--width) + var(--padding-x));
  height: calc(var(--height) + var(--padding-y));
}

.placeholder[data-rotations='1'],
.placeholder[data-rotations='3'] {
  /* Flipped offsets for 90 (1) and 270 (3) clockwise rotations */
  --offset-x: var(--viewer-text-annotation-offset-x-rotated);
  --offset-y: var(--viewer-text-annotation-offset-y-rotated);
  --padding-x: var(--viewer-text-annotation-padding-x-rotated);
  --padding-y: var(--viewer-text-annotation-padding-y-rotated);
}

/* Show focus ring when tabbed to */
.placeholder:focus-visible {
  border-color: var(--viewer-text-annotation-active-color);
}

ink-text-box {
  pointer-events: auto;
}`]);
}
