/* Content */
[data-tooltip] {
  position: relative;
}

/* Arrow */
[data-tooltip]:before {
  pointer-events: none;
  position: absolute;
  content: '';
  font-size: var(--k24-gap-sm);
  width: 0.71428571rem;
  height: 0.71428571rem;
  background: var(--k24-gray);
  transform: rotate(45deg);
  z-index: 9999;
}

/* Popup */
[data-tooltip]:after {
  pointer-events: none;
  content: attr(data-tooltip);
  position: absolute;
  text-transform: none;
  text-align: left;
  white-space: nowrap;
  font-size: var(--k24-gap-sm);
  line-height: 1.4285rem;
  max-width: none;
  background: var(--k24-gray);
  padding: var(--k24-gap-xs) var(--k24-gap-sm);
  font-weight: var(--k24-font-weight-base);
  font-style: normal;
  color: var(--k24-light-reverse);
  border-radius: var(--k24-border-radius-lg);
  z-index: 9999;
}

/* Default Position (Top Center) */
[data-tooltip]:not([data-position]):before {
  top: auto;
  right: auto;
  bottom: 100%;
  left: 50%;
  background: var(--k24-red);
  margin-left: -0.07142857rem;
  margin-bottom: 0.14285714rem;
}
[data-tooltip]:not([data-position]):after {
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: var(--k24-gap-xs);
}

/* Animation */
[data-tooltip]:before,
[data-tooltip]:after {
  pointer-events: none;
  visibility: hidden;
}
[data-tooltip]:before {
  opacity: 0;
  transform: rotate(45deg) scale(0) !important;
  transform-origin: center top;
  transition: all 0.1s ease;
}
[data-tooltip]:after {
  opacity: 1;
  transform-origin: center bottom;
  transition: all 0.1s ease;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  pointer-events: auto;
}
[data-tooltip]:hover:before {
  transform: rotate(45deg) scale(1) !important;
  opacity: 1;
}

/* Animation Position */
[data-tooltip]:after,
[data-tooltip][data-position="top center"]:after,
[data-tooltip][data-position="bottom center"]:after {
  transform: translateX(-50%) scale(0) !important;
}
[data-tooltip]:hover:after,
[data-tooltip][data-position="bottom center"]:hover:after {
  transform: translateX(-50%) scale(1) !important;
}
[data-tooltip][data-position="left center"]:after,
[data-tooltip][data-position="right center"]:after {
  transform: translateY(-50%) scale(0) !important;
}
[data-tooltip][data-position="left center"]:hover:after,
[data-tooltip][data-position="right center"]:hover:after {
  transform: translateY(-50%) scale(1) !important;
}
[data-tooltip][data-position="top left"]:after,
[data-tooltip][data-position="top right"]:after,
[data-tooltip][data-position="bottom left"]:after,
[data-tooltip][data-position="bottom right"]:after {
  transform: scale(0) !important;
}
[data-tooltip][data-position="top left"]:hover:after,
[data-tooltip][data-position="top right"]:hover:after,
[data-tooltip][data-position="bottom left"]:hover:after,
[data-tooltip][data-position="bottom right"]:hover:after {
  transform: scale(1) !important;
}

/*--------------
    Position
---------------*/


/* Top Center */
[data-position="top center"][data-tooltip]:after {
  top: auto;
  right: auto;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: var(--k24-gap-xs);
}
[data-position="top center"][data-tooltip]:before {
  top: auto;
  right: auto;
  bottom: 100%;
  left: 50%;
  background: var(--k24-red);
  margin-left: -0.07142857rem;
  margin-bottom: 0.14285714rem;
}

/* Top Left */
[data-position="top left"][data-tooltip]:after {
  top: auto;
  right: auto;
  left: 0;
  bottom: 100%;
  margin-bottom: 1.5rem;
}
[data-position="top left"][data-tooltip]:before {
  top: auto;
  right: auto;
  bottom: 100%;
  left: var(--k24-gap-sm);
  margin-left: -0.07142857rem;
  margin-bottom: 1.25rem;
}

/* Top Right */
[data-position="top right"][data-tooltip]:after {
  top: auto;
  left: auto;
  right: 0;
  bottom: 100%;
  margin-bottom: var(--k24-gap-xs);
}
[data-position="top right"][data-tooltip]:before {
  top: auto;
  left: auto;
  bottom: 100%;
  right: var(--k24-gap-sm);
  margin-left: -0.07142857rem;
  margin-bottom: 0.14285714rem;
}

/* Bottom Center */
[data-position="bottom center"][data-tooltip]:after {
  bottom: auto;
  right: auto;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 1.0rem;
}
[data-position="bottom center"][data-tooltip]:before {
  bottom: auto;
  right: auto;
  top: 100%;
  left: 50%;
  margin-left: -0.07142857rem;
  margin-top: 0.75rem;
}

/* Bottom Left */
[data-position="bottom left"][data-tooltip]:after {
  left: 0;
  top: 100%;
  margin-top: 1.0rem;
}
[data-position="bottom left"][data-tooltip]:before {
  bottom: auto;
  right: auto;
  top: 100%;
  left: var(--k24-gap-sm);
  margin-left: -0.07142857rem;
  margin-top: 0.9rem;
}

/* Bottom Right */
[data-position="bottom right"][data-tooltip]:after {
  right: 0;
  top: 100%;
  margin-top: 0.75rem;
}

[data-position="bottom right"][data-tooltip]:before {
  bottom: auto;
  left: auto;
  top: 100%;
  right: var(--k24-gap-sm);
  margin-left: -0.14285714rem;
  margin-top: var(--k24-gap-xs);
}

/* Left Center */
[data-position="left center"][data-tooltip]:after {
  right: 100%;
  top: 50%;
  margin-right: var(--k24-gap-xs);
  transform: translateY(-50%);
}
[data-position="left center"][data-tooltip]:before {
  right: 100%;
  top: 50%;
  margin-top: -0.14285714rem;
  margin-right: -0.07142857rem;
}

/* Right Center */
[data-position="right center"][data-tooltip]:after {
  left: 100%;
  top: 50%;
  margin-left: var(--k24-gap-xs);
  transform: translateY(-50%);
}
[data-position="right center"][data-tooltip]:before {
  left: 100%;
  top: 50%;
  margin-top: -0.07142857rem;
  margin-left: 0.14285714rem;
}