@import "../_variables.css";

:host {
  --line-color: var(--theme-purple);
  --line-base: var(--theme-color);
  --line-width: 1px;
  --distance-h: 5px;
  --distance-w: 5px;
  --line-w: 1px;
  --line-h: 1px;
  font-size: 16px;
}

:host > figure {
  margin: 0;
  position: absolute;
  height: var(--distance-h);
  width: var(--distance-w);
  top: var(--top);
  left: var(--left);
  right: var(--right);
  overflow: visible;
  pointer-events: none;
  z-index: var(--layer-3);
  display: flex;
  align-items: center;
  flex-direction: var(--direction);
}

:host > figure figcaption {
  width: max-content;
  color: white;
  text-shadow: 0 0.5px 0 hsla(0, 0%, 0%, 0.4);
  box-shadow: 0 0.5px 0 hsla(0, 0%, 0%, 0.4);
  background: var(--line-color);
  border-radius: 1em;
  text-align: center;
  line-height: 1.1;
  font-size: 0.7em;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  padding: 0.25em 0.5em 0.275em;
  font-variant-numeric: proportional-num oldstyle-nums stacked-fractions slashed-zero;
}

:host > figure span {
  background: var(--line-color);
  height: var(--line-h);
  width: var(--line-w);
}

:host > figure div {
  flex: 2;
  background: var(--line-color);
  width: var(--line-w);
  height: var(--line-h);
}

:host figure:matches([quadrant="bottom"], [quadrant="right"]) > div:first-of-type,
:host figure:matches([quadrant="top"], [quadrant="left"]) > div:last-of-type {
  background: linear-gradient(to var(--quadrant), hotpink 0%, var(--line-color) 100%);
}