fujo-shimeji {
  --image-width: 130px;

  --bubble-radius: 1rem;
  --bubble-text-color: black;
  --bubble-border-width: 2px;
  --bubble-border-color: black;
  --bubble-background-color: white;

  --bubble-arrow-height: 6px;
  --bubble-arrow-length: 10px;
  --bubble-arrow-top: 50%;

  --bubble-width: 80px;
}

fujo-shimeji .fujo-wrapper {
  position: fixed;
  z-index: 50;
  filter: drop-shadow(2px 2px 2px #00000077);
  bottom: 0;
  left: 0;
  color: var(--bubble-text-color);
}

fujo-shimeji[side="right"] .fujo-wrapper {
  left: unset;
  right: 0;
}

fujo-shimeji[side="left"] .fujo-wrapper {
  right: unset;
  left: 0;
}

fujo-shimeji[position="seme"] .fujo-wrapper {
  bottom: unset;
  top: 0;
}

fujo-shimeji[position="uke"] .fujo-wrapper {
  top: unset;
  bottom: 0;
}

fujo-shimeji .fujo-character {
  width: var(--image-width);
  padding: 0.25rem;
}

fujo-shimeji[side="left"] .fujo-character {
  transform: scaleX(-1);
}

fujo-shimeji .fujo-bubble {
  position: absolute;
  border-radius: var(--bubble-radius);
  border-style: solid;
  border-width: var(--bubble-border-width);
  border-color: var(--bubble-border-color);
  background-color: var(--bubble-background-color);
  padding: 0.5rem;
  margin: 0.5rem;
  width: fit-content;
}

fujo-shimeji[side="right"] .fujo-bubble {
  right: calc(var(--image-width) + 0.25rem);
}

fujo-shimeji[side="left"] .fujo-bubble {
  left: calc(var(--image-width) + 0.25rem);
}

fujo-shimeji[position="seme"] .fujo-bubble {
  bottom: 0;
}

fujo-shimeji[position="uke"] .fujo-bubble {
  top: 0;
}

fujo-shimeji .fujo-bubble:before,
fujo-shimeji .fujo-bubble:after {
  top: var(--bubble-arrow-top);
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
}

fujo-shimeji .fujo-bubble:before {
  border-width: var(--bubble-arrow-height);
  margin-top: calc(var(--bubble-arrow-height) * -1);
}

fujo-shimeji[side="right"] .fujo-bubble:before {
  left: 100%;
  border-left-color: var(--bubble-border-color);
  border-left-width: calc(
    var(--bubble-arrow-length) + var(--bubble-border-width)
  );
}

fujo-shimeji[side="left"] .fujo-bubble:before {
  right: 100%;
  border-right-color: var(--bubble-border-color);
  border-right-width: calc(
    var(--bubble-arrow-length) + var(--bubble-border-width)
  );
}

fujo-shimeji .fujo-bubble:after {
  border-width: calc(var(--bubble-arrow-height) - var(--bubble-border-width));
  margin-top: calc(
    (var(--bubble-arrow-height) - var(--bubble-border-width)) * -1
  );
}

fujo-shimeji[side="right"] .fujo-bubble:after {
  left: 100%;
  border-left-color: var(--bubble-background-color);
  border-left-width: calc(
    var(--bubble-arrow-length) - var(--bubble-border-width)
  );
}

fujo-shimeji[side="left"] .fujo-bubble:after {
  right: 100%;
  border-right-color: var(--bubble-background-color);
  border-right-width: calc(
    var(--bubble-arrow-length) - var(--bubble-border-width)
  );
}

.fujo-bubble-content {
  overflow: auto;
  scrollbar-width: thin;
  /* The value of 2.25rem is eyeballed to match the lower margin. CSS is hard! */
  max-height: calc(100dvh - 2.25rem);
  width: var(--bubble-width);
}

/* When JavaScript is disabled on the browser, do not display the component at all */
@media (scripting: none) {
  fujo-shimeji {
    display: none;
  }
}

/* Some methods of disabling JavaScript (e.g. through a browser extension) are not detected by "scripting: none" so add a hacky fallback: if the component doesn't have a child <img> tag, then do not display it */
fujo-shimeji:not(:has(img)) {
  display: none;
}