@layer blades {
:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
  --pico-tooltip-background-color: var(--pico-contrast-background);
  --pico-tooltip-color: var(--pico-contrast-inverse);
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]:not(a, button, input, [role="button"]) {
  cursor: help;
  border-bottom: 1px dotted;
  text-decoration: none;
}

[data-tooltip][data-placement="top"]:before, [data-tooltip][data-placement="top"]:after, [data-tooltip]:before, [data-tooltip]:after {
  z-index: 99;
  border-radius: var(--pico-border-radius);
  background: var(--pico-tooltip-background-color);
  content: attr(data-tooltip);
  color: var(--pico-tooltip-color);
  font-style: normal;
  font-weight: var(--pico-font-weight);
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  padding: .25rem .5rem;
  font-size: .875rem;
  text-decoration: none;
  display: block;
  position: absolute;
  bottom: 100%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -.25rem);
}

[data-tooltip][data-placement="top"]:after, [data-tooltip]:after {
  content: "";
  color: var(--pico-tooltip-background-color);
  background-color: #0000;
  border-top: .3rem solid;
  border-left: .3rem solid #0000;
  border-right: .3rem solid #0000;
  border-radius: 0;
  padding: 0;
  transform: translate(-50%);
}

[data-tooltip][data-placement="bottom"]:before, [data-tooltip][data-placement="bottom"]:after {
  top: 100%;
  bottom: auto;
  transform: translate(-50%, .25rem);
}

[data-tooltip][data-placement="bottom"]:after {
  border: .3rem solid #0000;
  border-bottom-color: currentColor;
  transform: translate(-50%, -.3rem);
}

[data-tooltip][data-placement="left"]:before, [data-tooltip][data-placement="left"]:after {
  inset: 50% 100% auto auto;
  transform: translate(-.25rem, -50%);
}

[data-tooltip][data-placement="left"]:after {
  border: .3rem solid #0000;
  border-left-color: currentColor;
  transform: translate(.3rem, -50%);
}

[data-tooltip][data-placement="right"]:before, [data-tooltip][data-placement="right"]:after {
  inset: 50% auto auto 100%;
  transform: translate(.25rem, -50%);
}

[data-tooltip][data-placement="right"]:after {
  border: .3rem solid #0000;
  border-right-color: currentColor;
  transform: translate(-.3rem, -50%);
}

[data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip]:hover:before, [data-tooltip]:hover:after {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  [data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip]:hover:before, [data-tooltip]:hover:after {
    --pico-tooltip-slide-to: translate(-50%, -.25rem);
    opacity: 0;
    animation-name: tooltip-slide;
    animation-duration: .2s;
    animation-fill-mode: forwards;
    transform: translate(-50%, .75rem);
  }

  [data-tooltip]:focus:after, [data-tooltip]:hover:after {
    --pico-tooltip-caret-slide-to: translate(-50%, 0rem);
    animation-name: tooltip-caret-slide;
    transform: translate(-50%, -.25rem);
  }

  [data-tooltip][data-placement="bottom"]:focus:before, [data-tooltip][data-placement="bottom"]:focus:after, [data-tooltip][data-placement="bottom"]:hover:before, [data-tooltip][data-placement="bottom"]:hover:after {
    --pico-tooltip-slide-to: translate(-50%, .25rem);
    animation-name: tooltip-slide;
    transform: translate(-50%, -.75rem);
  }

  [data-tooltip][data-placement="bottom"]:focus:after, [data-tooltip][data-placement="bottom"]:hover:after {
    --pico-tooltip-caret-slide-to: translate(-50%, -.3rem);
    animation-name: tooltip-caret-slide;
    transform: translate(-50%, -.5rem);
  }

  [data-tooltip][data-placement="left"]:focus:before, [data-tooltip][data-placement="left"]:focus:after, [data-tooltip][data-placement="left"]:hover:before, [data-tooltip][data-placement="left"]:hover:after {
    --pico-tooltip-slide-to: translate(-.25rem, -50%);
    animation-name: tooltip-slide;
    transform: translate(.75rem, -50%);
  }

  [data-tooltip][data-placement="left"]:focus:after, [data-tooltip][data-placement="left"]:hover:after {
    --pico-tooltip-caret-slide-to: translate(.3rem, -50%);
    animation-name: tooltip-caret-slide;
    transform: translate(.05rem, -50%);
  }

  [data-tooltip][data-placement="right"]:focus:before, [data-tooltip][data-placement="right"]:focus:after, [data-tooltip][data-placement="right"]:hover:before, [data-tooltip][data-placement="right"]:hover:after {
    --pico-tooltip-slide-to: translate(.25rem, -50%);
    animation-name: tooltip-slide;
    transform: translate(-.75rem, -50%);
  }

  [data-tooltip][data-placement="right"]:focus:after, [data-tooltip][data-placement="right"]:hover:after {
    --pico-tooltip-caret-slide-to: translate(-.3rem, -50%);
    animation-name: tooltip-caret-slide;
    transform: translate(-.05rem, -50%);
  }
}

@keyframes tooltip-slide {
  to {
    transform: var(--pico-tooltip-slide-to);
    opacity: 1;
  }
}

@keyframes tooltip-caret-slide {
  50% {
    opacity: 0;
  }

  to {
    transform: var(--pico-tooltip-caret-slide-to);
    opacity: 1;
  }
}

}