/// The arrow of a floating surface, drawn on the CDK pane by `@agorapulse/ui-components/floating`.
///
/// Global CSS, and it has to be: the pane is in no component's DOM. A mixin on the consumer's
/// surface would not reach it either — a `TemplatePortal` moves only the nodes, so `:host-context()`
/// never sees the pane. The engine sets `.ap-floating-arrow` only when an arrow is asked for.
.ap-floating-arrow {
    // One shadow over the whole silhouette: `drop-shadow` follows the alpha where `box-shadow`
    // would follow the box. A surface with its own elevation overrides `--ap-arrow-filter` — the
    // tooltip's three surfaces do not share one, and the dark one has none.
    filter: var(--ap-arrow-filter, var(--sys-elevation-floating-filter));

    > * {
        // `!important` because an encapsulated `.class[_ngcontent-x]` is twice as specific as this
        // selector and injected after it. Both properties, since a surface may carry its elevation
        // either way.
        box-shadow: none !important;
        filter: none !important;
    }

    &::before {
        content: '';
        position: absolute;
        // Written on the pane from `arrow-geometry.ts`, which the offset computation reads too.
        width: var(--ap-floating-arrow-width, 16px);
        height: var(--ap-floating-arrow-height, 8px);
        top: var(--ap-arrow-top, auto);
        right: var(--ap-arrow-right, auto);
        bottom: var(--ap-arrow-bottom, auto);
        left: var(--ap-arrow-left, auto);
        rotate: var(--ap-arrow-rotate, 0deg);

        background: var(--ap-arrow-background, var(--ref-color-white));

        // A mask, not a border triangle: it keeps the rounded tip, and `drop-shadow` follows its alpha.
        mask-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 8"%3E%3Cpath d="M6.68299 1.15238C7.43705 0.492586 8.56296 0.492588 9.31701 1.15238L16 7L0 7L6.68299 1.15238Z"/%3E%3C/svg%3E');
        mask-size: 100% 100%;
        mask-repeat: no-repeat;

        // Born hidden: before the first computation it has no correct place to stand.
        visibility: var(--ap-arrow-visibility, hidden);
    }
}