import { css } from 'chrome://resources/lit/v3_0/lit.rollup.js';
import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
import { getCss as getCrHiddenStyleLit } from 'chrome://resources/cr_elements/cr_hidden_style_lit.css.js';
import './shared_vars.css.js';
let instance = null;
export function getCss() {
    return instance || (instance = [...[getCrHiddenStyleLit()], css `
:host {
  --border-padding: calc(var(--viewer-text-annotation-handle-size) / 2);
  --handle-offset: calc(
      var(--viewer-text-annotation-border-width) / 2 +
      var(--border-padding));
  --primary-color: var(--viewer-text-annotation-active-color);
  --textarea-padding-inline: calc(
      var(--viewer-text-annotation-total-padding-inline) -
      var(--border-padding));
  --textarea-padding-vert: calc(
      var(--viewer-text-annotation-total-padding-vert) -
      var(--border-padding));
  --offset-x: calc(
      var(--viewer-text-annotation-offset-x) +
      var(--border-padding));
  --offset-y: calc(
      var(--viewer-text-annotation-offset-y) +
      var(--border-padding));
  --textbox-location-x: 0;
  --textbox-location-y: 0;
  cursor: move;
  top: calc(var(--textbox-location-y) - var(--offset-y));
  left: calc(var(--textbox-location-x) - var(--offset-x));
  padding: var(--border-padding);
  position: absolute;
  z-index: 1;
}

:host([text-rotations_='1']),
:host([text-rotations_='3']) {
  /* Flip the padding and offset values, since text is oriented vertically. */
  --textarea-padding-inline: calc(
      var(--viewer-text-annotation-total-padding-vert) -
      var(--border-padding));
  --textarea-padding-vert: calc(
      var(--viewer-text-annotation-total-padding-inline) -
      var(--border-padding));
  --offset-x: calc(
      var(--viewer-text-annotation-offset-x-rotated) +
      var(--border-padding));
  --offset-y: calc(
      var(--viewer-text-annotation-offset-y-rotated) +
      var(--border-padding));
}

.handle {
  background-color: var(--primary-color);
  border: 1px solid white;
  border-radius: 50%;
  height: var(--viewer-text-annotation-handle-size);
  position: absolute;
  transform: translate(-50%, -50%);
  user-select: none;
  width: var(--viewer-text-annotation-handle-size);
}

.handle.top {
  top: var(--handle-offset);
}

.handle.left {
  left: var(--handle-offset);
}

.handle.right {
  left: calc(100% - var(--handle-offset));
}

.handle.bottom {
  top: calc(100% - var(--handle-offset));
}

.handle.left.center,
.handle.right.center {
  top: 50%;
}

.handle.top.center,
.handle.bottom.center {
  left: 50%;
}

.handle.left,
.handle.right {
  cursor: ew-resize;
}

.handle.top,
.handle.bottom {
  cursor: ns-resize;
}

.handle.top.right,
.handle.bottom.left {
  cursor: nesw-resize;
}

.handle.top.left,
.handle.bottom.right {
  cursor: nwse-resize;
}

.textbox-wrapper {
  flex: 1;
  overflow: hidden;
  padding: var(--border-padding);
  border: var(--viewer-text-annotation-border-width) solid
      var(--primary-color);
  cursor: move;
  user-select: none;
}

textarea {
  background: none;
  border: none;
  display: block;
  outline: none;
  overflow: hidden;
  padding: var(--textarea-padding-vert) var(--textarea-padding-inline);
  resize: none;
}

:host([text-rotations_='1']) textarea {
  writing-mode: vertical-rl;
}

:host([text-rotations_='2']) textarea {
  transform: rotate(180deg);
}

:host([text-rotations_='3']) textarea {
  writing-mode: sideways-lr;
}`]);
}
