@layer components {
    .tooltip {
        position: fixed;
        z-index: 1070;
        max-width: 200px;
        padding: 0.15rem 0.45rem;
        font-family: var(--font-body);
        font-size: 0.8125rem;
        line-height: 1.35;
        font-weight: 300;
        color: #fff;
        text-align: center;
        white-space: pre-line;
        overflow-wrap: break-word;
        background-color: var(--theme-color-main);
        border: 1px solid var(--theme-color-main-dark);
        border-radius: 0.25rem;
        opacity: 0.9;
        pointer-events: none;
        animation: tooltip-appear 0.15s linear;
    }

    .tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: var(--tooltip-arrow, 50%);
        margin-left: -0.4rem;
        border-style: solid;
        border-width: 0.4rem 0.4rem 0;
        border-color: var(--theme-color-main-dark) transparent transparent;
    }

    .tooltip--below::after {
        top: auto;
        bottom: 100%;
        border-width: 0 0.4rem 0.4rem;
        border-color: transparent transparent var(--theme-color-main-dark);
    }

    @keyframes tooltip-appear {
        from {
            opacity: 0;
        }
    }
}