:host {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /**
  * @prop --viewer-transform-widget-x-axis-arrow-color: A CSS color for the arrow
  * at the end of the X axis on this widget. Defaults to `#ea3324`.
  */
  --viewer-transform-widget-x-axis-arrow-color: var(--x-axis-color);

  /**
  * @prop --viewer-transform-widget-y-axis-arrow-color: A CSS color for the arrow
  * at the end of the Y axis on this widget. Defaults to `#4faf32`.
  */
  --viewer-transform-widget-y-axis-arrow-color: var(--y-axis-color);

  /**
  * @prop --viewer-transform-widget-z-axis-arrow-color: A CSS color for the arrow
  * at the end of the Z axis on this widget. Defaults to `#0000ff`.
  */
  --viewer-transform-widget-z-axis-arrow-color: var(--z-axis-color);

  /**
  * @prop --viewer-transform-widget-two-axes-square-color: A CSS color for the squares
  * to translate by two axes at a time. Defaults to `#e0e0e0`.
  */
  --viewer-transform-widget-two-axes-square-color: var(--two-axes-color);


  /**
  * @prop --viewer-transform-widget-hovered-arrow-color: A CSS color for the arrow
  * when it is hovered. Defaults to `#ffff00`.
  */
  --viewer-transform-widget-hovered-arrow-color: #ffff00;

  /**
  * @prop --viewer-transform-widget-input-width: A CSS length for the width of the
  * input displayed near the handles. Defaults to `8em`.
  */
  --viewer-transform-widget-input-width: 8em;
}

.widget {
  position: absolute;
  top: 0;
  left: 0;
}

.widget.hovered {
  pointer-events: auto;
}

.widget-input.wrapper {
  position: absolute;
  pointer-events: auto;
  display: flex;
  align-items: center;
  border: 1px solid #444444;
  border-radius: 4px;
  width: var(--viewer-transform-widget-input-width);
  text-align: center;
  background-color: white;
  box-sizing: border-box;
}

.widget-input.units {
  position: relative;
  width: 25%;
  height: 100%;
  padding: 0 0.25rem;
  font-size: 0.8125rem;
  color: #444444;
}

input.widget-input {
  position: relative;
  text-align: center;
  box-sizing: border-box;
  width: 75%;
  height: 100%;
  outline: none;
  border-width: 0 1px 0 0;
  border-color: #444444;
  border-radius: 2px 0 0 2px;
  font-size: 0.875rem;
  color: #444444;
}

input.widget-input.x-translate,
input.widget-input.x-rotate {
  border-left: 5px solid var(--viewer-transform-widget-x-axis-arrow-color);
}

input.widget-input.y-translate,
input.widget-input.y-rotate {
  border-left: 5px solid var(--viewer-transform-widget-y-axis-arrow-color);
}

input.widget-input.z-translate,
input.widget-input.z-rotate {
  border-left: 5px solid var(--viewer-transform-widget-z-axis-arrow-color);
}

input.widget-input:disabled {
  color: #888888;
}

input.widget-input:focus {
  outline: none;
}