:host {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /**
   * @prop --viewer-markup-arrow-line-stroke-color: A CSS color that
   * specifies the color of the arrow line's outline.
   */
  --viewer-markup-arrow-line-stroke-color: var(--red-800);
  /**
   * @prop --viewer-markup-arrow-line-stroke-width: A CSS length that
   * specifies the width of the arrow line's outline.
   *
   * Note that this is scaled by the component's scale factor, so providing a scale
   * other than 1 will result in a different stroke width.
   */
  --viewer-markup-arrow-line-stroke-width: 4px;
  /**
   * @prop --viewer-markup-arrow-head-stroke-color: A CSS color that
   * specifies the color of the arrow head's outline.
   */
  --viewer-markup-arrow-head-stroke-color: var(--red-800);
  /**
   * @prop --viewer-markup-arrow-head-stroke-width: A CSS length that
   * specifies the width of the arrow head's outline.
   *
   * Note that this is scaled by the component's scale factor, so providing a scale
   * other than 1 will result in a different stroke width.
   */
  --viewer-markup-arrow-head-stroke-width: 4px;
  /**
   * @prop --viewer-markup-arrow-head-fill-color: A CSS color that
   * specifies the color of the arrow head's fill.
   */
  --viewer-markup-arrow-head-fill-color: var(--red-800);
  /**
   * @prop --viewer-markup-arrow-head-fill-opacity: A number between
   * 0 and 1 that specifies the opacity of the arrow head's fill.
   */
  --viewer-markup-arrow-head-fill-opacity: 1;
  /**
   * @prop --viewer-markup-arrow-bounds-cap-border-color: A CSS color that
   * specifies the color of arrow start/end resize anchors' border.
   */
  --viewer-markup-arrow-bounds-cap-border-color: var(--blue-400);
  /**
   * @prop --viewer-markup-arrow-bounds-cap-border-width: A CSS length that
   * specifies the width of arrow start/end resize anchors' border.
   */
  --viewer-markup-arrow-bounds-cap-border-width: 1px;
  /**
   * @prop --viewer-markup-arrow-bounds-cap-background-color: A CSS color that
   * specifies the background color of the arrow start/end resize anchors.
   */
  --viewer-markup-arrow-bounds-cap-background-color: white;
  /**
   * @prop --viewer-markup-arrow-bounds-center-anchor-border-color: A CSS color that
   * specifies the color of the center resize anchor's border.
   */
  --viewer-markup-arrow-bounds-center-anchor-border-color: white;
  /**
   * @prop --viewer-markup-arrow-bounds-center-anchor-border-width: A CSS length that
   * specifies the width of the center resize anchor's border.
   */
  --viewer-markup-arrow-bounds-center-anchor-border-width: 1px;
  /**
   * @prop --viewer-markup-arrow-bounds-center-anchor-background-color: A CSS color that
   * specifies the background color of the center resize anchor.
   */
  --viewer-markup-arrow-bounds-center-anchor-background-color: var(--blue-400);
  /**
   * @prop --viewer-markup-arrow-bounds-outline-width: A CSS color that
   * specifies the width of the selected arrow outline.
   */
  --viewer-markup-arrow-bounds-outline-width: 1px;
  /**
   * @prop --viewer-markup-arrow-bounds-outline-color: A CSS color that
   * specifies the color of selected arrow outline.
   */
  --viewer-markup-arrow-bounds-outline-color: var(--blue-400);
  /**
   * @prop --viewer-markup-arrow-bounds-anchor-width: A CSS length that
   * specifies the width of the resize and reposition anchors.
   */
  --viewer-markup-arrow-bounds-anchor-width: 9px;
  /**
    * @prop --viewer-markup-arrow-bounds-anchor-height: A CSS length that
    * specifies the height of the resize and reposition anchors.
    */
  --viewer-markup-arrow-bounds-anchor-height: 9px;
  /**
    * @prop --viewer-markup-arrow-scale: A number that specifies the scale of the arrow.
    * This is used to scale the arrow's stroke width. Defaults to 1, and is managed internally
    * by the component.
    */
  --viewer-markup-arrow-scale: 1;
}

.svg {
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.create-overlay {
  pointer-events: auto;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.line {
  pointer-events: auto;
  stroke: var(--viewer-markup-arrow-line-stroke-color);
  stroke-width: calc(
    var(--viewer-markup-arrow-line-stroke-width) *
      var(--viewer-markup-arrow-scale)
  );
  cursor: default;
}

.head {
  pointer-events: auto;
  stroke: var(--viewer-markup-arrow-head-stroke-color);
  stroke-width: calc(
    var(--viewer-markup-arrow-head-stroke-width) *
      var(--viewer-markup-arrow-scale)
  );
  fill: var(--viewer-markup-arrow-head-fill-color);
  fill-opacity: var(--viewer-markup-arrow-head-fill-opacity);
  cursor: default;
}

.bounds-line {
  pointer-events: auto;
  stroke: var(--viewer-markup-arrow-bounds-outline-color);
  stroke-width: var(--viewer-markup-arrow-bounds-outline-width);
}

.bounds-container {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.bounds-anchor-position {
  position: absolute;
  transform: translate(-50%, -50%);
}

.bounds-anchor {
  pointer-events: auto;
  cursor: default;
  user-select: none;
}

.bounds-default-anchor {
  width: var(--viewer-markup-arrow-bounds-anchor-width);
  height: var(--viewer-markup-arrow-bounds-anchor-height);
  box-sizing: border-box;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.bounds-center-anchor {
  border-radius: 100%;
  border-width: var(--viewer-markup-arrow-bounds-center-anchor-border-width);
  border-color: var(--viewer-markup-arrow-bounds-center-anchor-border-color);
  border-style: solid;
  background-color: var(
    --viewer-markup-arrow-bounds-center-anchor-background-color
  );
}

.bounds-cap-anchor {
  border-width: var(--viewer-markup-arrow-bounds-cap-border-width);
  border-color: var(--viewer-markup-arrow-bounds-cap-border-color);
  border-style: solid;
  background-color: var(--viewer-markup-arrow-bounds-cap-background-color);
}