// The tooltip's surface: the `floating` engine places it, draws its tip and attaches it into a CDK pane.
.ap-tooltip {
    // A component host is `inline`, and `width: fit-content` and the padding need a block.
    display: block;

    width: fit-content;
    max-width: 350px;
    background: var(--comp-tooltip-text-color-main-default-bg);
    border-radius: var(--ref-border-radius-md);

    &.ap-predefined-tooltip {
        max-width: 256px;
        width: 256px;
        max-height: 280px;
        border-radius: var(--ref-border-radius-sm);
        background: var(--ref-color-white);

        /* Shadow/Low (default) */
        box-shadow: var(--sys-elevation-floating);

        .ap-content-container.ap-content-predefined-container {
            padding: 0;
        }
    }

    .ap-content-container {
        padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
        border-radius: var(--ref-border-radius-md);

        .ap-tooltip-text {
            color: var(--comp-tooltip-text-default-color);
            font-family: var(--comp-tooltip-text-style-font-family);
            font-size: var(--comp-tooltip-text-style-size);
            font-weight: var(--comp-tooltip-text-style-weight);
            line-height: var(--comp-tooltip-text-style-line-height);
        }
    }

    &.ap-tooltip-custom-template {
        background-color: var(--ref-color-white);

        // No-arrow case only: with an arrow, `.ap-tooltip-pane.custom-template` below takes the shadow over.
        filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.08));

        .ap-tooltip-text {
            color: var(--ref-color-grey-100);
        }
    }
}

// The pane carries the shadow, one per surface: `drop-shadow` has to wrap panel and tip as one shape.
// It carries the fade too: the tip is the pane's `::before`, which the panel's opacity never reaches.
.ap-tooltip-pane {
    --ap-arrow-filter: none;

    animation: fadeIn var(--ref-animation-short) ease-in-out;

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    &.custom-template {
        --ap-arrow-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.08));
    }

    &.predefined {
        --ap-arrow-filter: var(--sys-elevation-floating-filter);
    }
}