/*
  * Ax Unlimited Elements CSS Tooltip
*/
[aria-label][role~="tooltip"] {
    position: relative
}

[aria-label][role~="tooltip"]::after {
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    opacity: 0;
    pointer-events: none;
    transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
    position: absolute;
    box-sizing: border-box;
    z-index: 10;
    transform-origin: top
}

[aria-label][role~="tooltip"]::after {
    background: rgb(17 17 17 / .9);
    border-radius: 4px;
    line-height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    content: attr(aria-label);
    white-space: nowrap;
    box-sizing: content-box
}

[aria-label][role~="tooltip"]:hover::after,
[aria-label][role~="tooltip"]:focus::after {
    opacity: 1;
    pointer-events: auto
}

[role~="tooltip"][data-microtip-position|="top"]::after {
    margin-bottom: var(--axueGap)
}

[role~="tooltip"][data-microtip-position|="top"]::after {
    transform: translate3d(-50%, 0, 0);
    bottom: 100%;
    left: 50%
}

[role~="tooltip"][data-microtip-position="top"]:hover::after {
    transform: translate3d(-50%, -5px, 0)
}

[role~="tooltip"][data-microtip-position="top-left"]::after {
    transform: translate3d(calc(-100% + 16px), 0, 0);
    bottom: 100%
}

[role~="tooltip"][data-microtip-position="top-left"]:hover::after {
    transform: translate3d(calc(-100% + 16px), -5px, 0)
}

[role~="tooltip"][data-microtip-position="top-right"]::after {
    transform: translate3d(calc(0% + -16px), 0, 0);
    bottom: 100%
}

[role~="tooltip"][data-microtip-position="top-right"]:hover::after {
    transform: translate3d(calc(0% + -16px), -5px, 0)
}

[role~="tooltip"][data-microtip-position|="bottom"]::after {
    margin-top: var(--axueGap);
}

[role~="tooltip"][data-microtip-position|="bottom"]::after {
    transform: translate3d(-50%, -10px, 0);
    top: 100%;
    left: 50%
}

[role~="tooltip"][data-microtip-position="bottom"]:hover::after {
    transform: translate3d(-50%, 0, 0)
}

[role~="tooltip"][data-microtip-position="bottom-left"]::after {
    transform: translate3d(calc(-100% + 16px), -10px, 0);
    top: 100%
}

[role~="tooltip"][data-microtip-position="bottom-left"]:hover::after {
    transform: translate3d(calc(-100% + 16px), 0, 0)
}

[role~="tooltip"][data-microtip-position="bottom-right"]::after {
    transform: translate3d(calc(0% + -16px), -10px, 0);
    top: 100%
}

[role~="tooltip"][data-microtip-position="bottom-right"]:hover::after {
    transform: translate3d(calc(0% + -16px), 0, 0)
}

[role~="tooltip"][data-microtip-position="left"]::after {
    bottom: auto;
    left: auto;
    right: 100%;
    top: 50%;
    transform: translate3d(10px, -50%, 0)
}

[role~="tooltip"][data-microtip-position="left"]::after {
    margin-right: var(--axueGap);
}

[role~="tooltip"][data-microtip-position="left"]:hover::after {
    transform: translate3d(0, -50%, 0)
}

[role~="tooltip"][data-microtip-position="right"]::after {
    bottom: auto;
    left: 100%;
    top: 50%;
    transform: translate3d(-10px, -50%, 0)
}

[role~="tooltip"][data-microtip-position="right"]::after {
    margin-left: var(--axueGap);
}

[role~="tooltip"][data-microtip-position="right"]:hover::after {
    transform: translate3d(0, -50%, 0)
}
[role~="tooltip"][data-microtip-size="small"]::after {
    white-space: initial;
}

[role~="tooltip"][data-microtip-size="medium"]::after {
    white-space: initial;
}

[role~="tooltip"][data-microtip-size="large"]::after {
    white-space: initial;
}