:host {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /**
   * @prop --viewer-markup-freeform-stroke-color: A CSS color that
   * specifies the color of the freeform line.
   */
  --viewer-markup-freeform-stroke-color: var(--red-800);
  /**
    * @prop --viewer-markup-freeform-stroke-width: A CSS length that
    * specifies the width of the freeform line.
    *
    * 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-freeform-stroke-width: 4px;
  /**
    * @prop --viewer-markup-freeform-line-join: The join behavior between
    * the lines making up this freeform markup. Defaults to `round`.
    */
  --viewer-markup-freeform-line-join: round;
  /**
    * @prop --viewer-markup-freeform-line-cap: The cap behavior for
    * the lines making up this freeform markup. Defaults to `round`.
    */
  --viewer-markup-freeform-line-cap: round;
  /**
   * @prop --viewer-markup-freeform-bounds-outline-border-color: A CSS color that
   * specifies the color of the circle's selected bounding box border.
   */
  --viewer-markup-freeform-bounds-outline-border-color: var(--blue-400);
  /**
    * @prop --viewer-markup-freeform-bounds-outline-border-width: A CSS length that
    * specifies the width of the circle's selected bounding box border.
    */
  --viewer-markup-freeform-bounds-outline-border-width: 1px;
  /**
    * @prop --viewer-markup-freeform-bounds-edge-anchor-border-color: A CSS color that
    * specifies the color of the edge and corner resize anchors' borders.
    */
  --viewer-markup-freeform-bounds-edge-anchor-border-color: var(--blue-400);
  /**
    * @prop --viewer-markup-freeform-bounds-edge-anchor-border-width: A CSS length that
    * specifies the width of the edge and corner resize anchors' borders.
    */
  --viewer-markup-freeform-bounds-edge-anchor-border-width: 1px;
  /**
    * @prop --viewer-markup-freeform-bounds-edge-anchor-background-color: A CSS color that
    * specifies the background color of the edge and corner resize anchors.
    */
  --viewer-markup-freeform-bounds-edge-anchor-background-color: white;
  /**
    * @prop --viewer-markup-freeform-bounds-center-anchor-border-color: A CSS color that
    * specifies the color of the center reposition anchor's border.
    */
  --viewer-markup-freeform-bounds-center-anchor-border-color: white;
  /**
    * @prop --viewer-markup-freeform-bounds-center-anchor-border-width: A CSS length that
    * specifies the width of the center reposition anchor's border.
    */
  --viewer-markup-freeform-bounds-center-anchor-border-width: 1px;
  /**
    * @prop --viewer-markup-freeform-bounds-center-anchor-background-color: A CSS color that
    * specifies the background color of the center reposition anchor.
    */
  --viewer-markup-freeform-bounds-center-anchor-background-color: var(
    --blue-400
  );
  /**
    * @prop --viewer-markup-freeform-bounds-anchor-width: A CSS length that
    * specifies the width of the resize and reposition anchors.
    */
  --viewer-markup-freeform-bounds-anchor-width: 9px;
  /**
    * @prop --viewer-markup-freeform-bounds-anchor-height: A CSS length that
    * specifies the height of the resize and reposition anchors.
    */
  --viewer-markup-freeform-bounds-anchor-height: 9px;
  /**
   * @prop --viewer-markup-freeform-scale: A number that specifies the scale of the freeform.
   * This is used to scale the freeform's stroke width. Defaults to 1, and is managed internally
   * by the component.
   */
  --viewer-markup-freeform-scale: 1;
}

.svg {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.path {
  pointer-events: auto;
  cursor: default;
  stroke: var(--viewer-markup-freeform-stroke-color);
  stroke-width: calc(
    var(--viewer-markup-freeform-stroke-width) *
      var(--viewer-markup-freeform-scale)
  );
  stroke-linejoin: var(--viewer-markup-freeform-line-join);
  stroke-linecap: var(--viewer-markup-freeform-line-cap);
}

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

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

.bounds-outline {
  position: absolute;
  border-width: var(--viewer-markup-freeform-bounds-outline-border-width);
  border-color: var(--viewer-markup-freeform-bounds-outline-border-color);
  border-style: solid;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.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-freeform-bounds-anchor-width);
  height: var(--viewer-markup-freeform-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-freeform-bounds-center-anchor-border-width);
  border-color: var(--viewer-markup-freeform-bounds-center-anchor-border-color);
  border-style: solid;
  background-color: var(
    --viewer-markup-freeform-bounds-center-anchor-background-color
  );
}

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