@layer genr.component {
    .tooltip {
        position: absolute;
        z-index: 100;
        display: none;
        opacity: 0;
        transform: scale(0.5);
        max-width: 15em;
        font-size: var(--font-size-sm);
        text-align: center;
        border-radius: 1rem;
        padding: 0.5rem 1rem;
        background-color: var(--color-signal-violet);
        color: var(--color-white);
        transition-property: opacity, transform;
        transition-duration: calc(var(--transition-duration) / 2);
        transition-timing-function: ease;
        transition-behavior: allow-discrete;

        &.is-active {
            display: flex;
            opacity: 1;
            transform: scale(1);

            @starting-style {
                opacity: 0;
                transform: scale(0.5);
            }
        }
    }
}