.tooltip {
    --tooltip-transform-x: 0;
    --tooltip-transform-y: 0;
    --tooltip-active-transform-x: 0;
    --tooltip-active-transform-y: 0;
    --tooltip-distance: calc(var(--w-full-padding, 40px) / 2);
    --tooltip-theme: var(--color-primary);
    --tooltip-color: var(--color-tint);

    opacity: 0;
    pointer-events: none;
    transition-property: opacity, transform;
    transform: translate(var(--tooltip-transform-x), var(--tooltip-transform-y));
    background: var(--tooltip-theme);
    color: var(--tooltip-color);
    min-width: 300px;
}

.tooltip::after {
    --tooltip-arrow-size: 10px;
    --tooltip-arrow-top: calc(100% - 1px);
    --tooltip-arrow-right: 14px;
    --tooltip-arrow-left: auto;

    content: '';
    position: absolute;
    top: var(--tooltip-arrow-top);
    right: var(--tooltip-arrow-right);
    left: var(--tooltip-arrow-left);
    width: 0; 
    height: 0; 
    border-style: solid;
    border-color: transparent;
    border-bottom-width: 0;
    border-left-width: var(--tooltip-arrow-size);
    border-right-width: var(--tooltip-arrow-size);
    border-top-width: var(--tooltip-arrow-size);
    border-top-color: var(--tooltip-theme);
}

.tooltip.arrow-left::after {
    --tooltip-arrow-right: auto;
    --tooltip-arrow-left: 28px;
}

.tooltip.position-top {
    --tooltip-transform-y: -100%;
    --tooltip-active-transform-y: calc(var(--tooltip-transform-y) - var(--tooltip-distance));

    top: 0;
    left: 0;
}

.tooltip.position-top-right {
    --tooltip-transform-y: -100%;
    --tooltip-active-transform-y: calc(var(--tooltip-transform-y) - var(--tooltip-distance));

    top: 0;
    left: auto;
    right: 0;
}

.tooltip-button:focus + .tooltip {
    opacity: 1;
    pointer-events: initial;
    transform: translate(var(--tooltip-active-transform-x), var(--tooltip-active-transform-y));
}

@media screen and (min-width: 48em) {
    .tooltip.md\:position-left {
        --tooltip-transform-y: 0;
        --tooltip-active-transform-y: 0;
        --tooltip-active-transform-x: var(--tooltip-distance);

        top: 0;
        left: 100%;
    }

    .tooltip.md\:position-left::after {
        --tooltip-arrow-top: 14px;
        --tooltip-arrow-right: auto;
        --tooltip-arrow-left: 0;

        border-top-color: transparent;
        border-right-color: var(--tooltip-theme);
        border-bottom-width: var(--tooltip-arrow-size);
        border-left-width: 0;
        transform: translateX(calc(-100% + 1px));
    }
}