.aw-tooltip {
    padding: 0.5rem;
    font-size: theme('fontSize.xs', 0.75rem);
    line-height: 0.875rem;
    border-radius: 0.3125rem;
    background-color: var(--c-mono-200);
    color: var(--c-surface);
    display: none;
    max-width: min(14.625rem, calc(100vw - 2rem));

    &[data-visible] {
        display: block;
        z-index: 20;
    }

    &[data-popper-reference-hidden] {
        visibility: hidden;
        pointer-events: none;
    }

    & > [data-popper-arrow] {
        background-clip: content-box;
        padding: 4px;

        &,
        &:before {
            background-color: inherit;
            position: absolute;
            width: 8px;
            height: 8px;
            z-index: -1;
        }

        &:before {
            content: '';
            transform: translate(-50%, -50%) rotate(45deg);
        }
    }

    &[data-popper-placement^='top'] > [data-popper-arrow] {
        bottom: -4px;
    }

    &[data-popper-placement^='bottom'] > [data-popper-arrow] {
        top: -4px;
    }

    &[data-popper-placement^='left'] > [data-popper-arrow] {
        right: -4px;
    }

    &[data-popper-placement^='right'] > [data-popper-arrow] {
        left: -4px;
    }
}