:host {
  /**
   * @prop --viewer-box-query-outline-exclusive-color: A CSS color that
   * specifies the color of box for an exclusive query. This will
   * be used in combination with `--viewer-box-query-outline-fill-opacity`
   * for the background color of the box. Defaults to `#0099cc`.
   */
  --viewer-box-query-outline-exclusive-color: #0099cc;
  /**
   * @prop --viewer-box-query-outline-exclusive-border-style: A border
   * style that specifies the type of border to display around the box for an
   * exclusive query. Defaults to `solid`.
   */
  --viewer-box-query-outline-exclusive-border-style: solid;
  /**
   * @prop --viewer-box-query-outline-inclusive-color: A CSS color that
   * specifies the color of box for an inclusive query. This will
   * be used in combination with `--viewer-box-query-outline-fill-opacity`
   * for the background color of the box. Defaults to `#00cc00`.
   */
  --viewer-box-query-outline-inclusive-color: #00cc00;
  /**
   * @prop --viewer-box-query-outline-inclusive-border-style: A border
   * style that specifies the type of border to display around the box for an
   * inclusive query. Defaults to `dashed`.
   */
  --viewer-box-query-outline-inclusive-border-style: dashed;
  /**
   * @prop --viewer-box-query-outline-border-radius: A CSS length that
   * specifies the border radius of the drawn box. Defaults to `0.25rem`.
   */
  --viewer-box-query-outline-border-radius: 0.25rem;
  /**
   * @prop--viewer-box-query-outline-fill-opacity: A number between 
   * 0 and 1 that specifies the opacity of the background of the drawn box.
   * Defaults to `0.25`.
   */
  --viewer-box-query-outline-fill-opacity: 0.25;
}

.bounds {
  position: absolute;
}

.outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: var(--viewer-box-query-outline-border-radius);
}

:host([exclusive="true"]) .outline {
  border: 3px var(--viewer-box-query-outline-exclusive-border-style) var(--viewer-box-query-outline-exclusive-color);
}

:host([inclusive="true"]) .outline {
  border: 3px var(--viewer-box-query-outline-inclusive-border-style) var(--viewer-box-query-outline-inclusive-color);
}

.fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: var(--viewer-box-query-outline-fill-opacity);
  border-radius: var(--viewer-box-query-outline-border-radius);
}

:host([exclusive="true"]) .fill {
  background-color: var(--viewer-box-query-outline-exclusive-color);
}

:host([inclusive="true"]) .fill {
  background-color: var(--viewer-box-query-outline-inclusive-color);
}