:root {
  --socion-popover-tooltip-z-index: 1200;
  --socion-popover-tooltip-max-width: min(36rem, calc(100vw - 2.4rem));
  --socion-popover-tooltip-padding: 1.2rem 1.4rem;
  --socion-popover-tooltip-radius: 1rem;
  --socion-popover-tooltip-gap: 1rem;
  --socion-popover-tooltip-bg: var(--theme-color-white);
  --socion-popover-tooltip-fg: var(--theme-color-primary);
  --socion-popover-tooltip-motion-distance: 0.6rem;
  --socion-popover-tooltip-motion-duration: 240ms;
  --socion-popover-tooltip-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --socion-popover-tooltip-arrow-size: 2rem;
  --socion-popover-tooltip-arrow-radius: 0.3rem;
  --socion-popover-tooltip-arrow-inset: calc(
    var(--socion-popover-tooltip-arrow-size) * 0.5 -
      calc(var(--socion-popover-tooltip-arrow-radius) * 0.5)
  );
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    --socion-popover-tooltip-arrow-size: 1.5rem;
  }
}

.socion-popover-tooltip {
  display: inline-flex;
  position: relative;
}

.socion-popover-tooltip-content {
  position: fixed;
  inset: auto;
  top: var(--socion-popover-top, 0);
  left: var(--socion-popover-left, 0);
  margin: 0;
  border: 0;
  padding: 0;
  z-index: var(--socion-popover-tooltip-z-index);
  overflow: visible;
  padding: var(--socion-popover-tooltip-arrow-inset);
  width: max-content;
  max-width: var(--socion-popover-tooltip-max-width);
  background: transparent;
  color: var(--socion-popover-tooltip-fg);
  opacity: 0;
  pointer-events: none;
  transform: translate(0, 0) scale(0.98);
  transition:
    opacity var(--socion-popover-tooltip-motion-duration)
      var(--socion-popover-tooltip-motion-ease),
    transform var(--socion-popover-tooltip-motion-duration)
      var(--socion-popover-tooltip-motion-ease);
}

.socion-popover-tooltip-content:not(.is-open):not(.is-closing) {
  display: none;
}

.socion-popover-tooltip-content[data-direction="up"] {
  transform: translateY(var(--socion-popover-tooltip-motion-distance))
    scale(0.98);
}

.socion-popover-tooltip-content[data-direction="down"] {
  transform: translateY(
      calc(-1 * var(--socion-popover-tooltip-motion-distance))
    )
    scale(0.98);
}

.socion-popover-tooltip-content[data-direction="left"] {
  transform: translateX(var(--socion-popover-tooltip-motion-distance))
    scale(0.98);
}

.socion-popover-tooltip-content[data-direction="right"] {
  transform: translateX(
      calc(-1 * var(--socion-popover-tooltip-motion-distance))
    )
    scale(0.98);
}

.socion-popover-tooltip-content.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, 0) scale(1);
}

.socion-popover-tooltip-content.is-closing[data-direction="up"] {
  opacity: 0;
  transform: translateY(var(--socion-popover-tooltip-motion-distance))
    scale(0.98);
}

.socion-popover-tooltip-content.is-closing[data-direction="down"] {
  opacity: 0;
  transform: translateY(
      calc(-1 * var(--socion-popover-tooltip-motion-distance))
    )
    scale(0.98);
}

.socion-popover-tooltip-content.is-closing[data-direction="left"] {
  opacity: 0;
  transform: translateX(var(--socion-popover-tooltip-motion-distance))
    scale(0.98);
}

.socion-popover-tooltip-content.is-closing[data-direction="right"] {
  opacity: 0;
  transform: translateX(
      calc(-1 * var(--socion-popover-tooltip-motion-distance))
    )
    scale(0.98);
}

.socion-popover-tooltip-content-inner {
  position: relative;
  display: block;
  background: var(--socion-popover-tooltip-bg);
  color: var(--socion-popover-tooltip-fg);
  border-radius: var(--socion-popover-tooltip-radius);
  padding: var(--socion-popover-tooltip-padding);
}

.socion-popover-tooltip-content-inner::after {
  content: "";
  position: absolute;
  width: var(--socion-popover-tooltip-arrow-size);
  height: var(--socion-popover-tooltip-arrow-size);
  background: var(--socion-popover-tooltip-bg);
  border-radius: var(--socion-popover-tooltip-arrow-radius);
  transform: rotate(45deg);
}

.socion-popover-tooltip-content[data-direction="up"]
  .socion-popover-tooltip-content-inner::after {
  left: var(--socion-popover-arrow-x, 50%);
  bottom: calc(var(--socion-popover-tooltip-arrow-inset) * -1);
  transform: translateX(-50%) rotate(45deg);
}

.socion-popover-tooltip-content[data-direction="down"]
  .socion-popover-tooltip-content-inner::after {
  left: var(--socion-popover-arrow-x, 50%);
  top: calc(var(--socion-popover-tooltip-arrow-inset) * -1);
  transform: translateX(-50%) rotate(45deg);
}

.socion-popover-tooltip-content[data-direction="left"]
  .socion-popover-tooltip-content-inner::after {
  top: var(--socion-popover-arrow-y, 50%);
  right: calc(var(--socion-popover-tooltip-arrow-inset) * -1);
  transform: translateY(-50%) rotate(45deg);
}

.socion-popover-tooltip-content[data-direction="right"]
  .socion-popover-tooltip-content-inner::after {
  top: var(--socion-popover-arrow-y, 50%);
  left: calc(var(--socion-popover-tooltip-arrow-inset) * -1);
  transform: translateY(-50%) rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .socion-popover-tooltip-content {
    transition: none;
  }
}