*, *::before, *::after { box-sizing: border-box; }

:host {
  --font-color: #424242;
  --button-color: lightgray;
  --button-hover: darkgray;
  --bg-color: #fff;
}

[data-color-mode="dark"] :host,
[data-theme="dark"] :host {
  --font-color: #e1e1ff;
  --button-color: gray;
  --button-hover: darkgray;
  --bg-color: #161625;
}

.swu {
  font-family:SuttonSignWritingOneD !important;
}


:host {
  border: 1px solid var(--font-color);
  cursor: move;
  font-size: 30px;
  color: var(--font-color);
  background: var(--bg-color);
}

:host.is-dragging { 
  border:0px;
  z-index: 1;
  text-align: initial;
  vertical-align: top;
  line-height: 0px;
  font-size: 0px;
  background: transparent;
}

::slotted(svg) {
  position: absolute;
  display: block;
  top: 2.5%;
  bottom: 2.5%;
  left: 2.5%;
  right: 2.5%;
  margin: auto;
  max-width: 95%;
  max-height: 95%;
  cursor: default;
}

:host.is-dragging::slotted(svg) { 
  top: 0;
  bottom: initial;
  left: 0;
  right: initial;
  margin: 0;
  max-width: initial;
  max-height: initial;
}

::slotted(svg g text.sym-line){
  fill: var(--font-color) !important;
}

::slotted(svg g text.sym-fill) {
  fill: var(--bg-color) !important;
}