// Underlying / overlaying visual contracts for sibling layers.

@mixin underlying-layer {
    position: absolute;
    pointer-events: none;
    overflow: visible;
    inset: 0;
    z-index: calc(var(--layer-main-z, 0) - 1);
}

@mixin overlaying-layer {
    position: absolute;
    inset: 0;
    pointer-events: none; // chrome children re-enable
    z-index: calc(var(--layer-main-z, 0) + 1);
}

@mixin shaped-from-main {
    border-radius: var(--layer-shape-radius, inherit);
    mask-image: var(--layer-shape-mask, none);
    -webkit-mask-image: var(--layer-shape-mask, none);
    inline-size: 100%;
    block-size: 100%;

    @supports (border-shape: inset(0)) {
        border-shape: var(--layer-shape-clip, none);
    }

    @supports not (border-shape: inset(0)) {
        clip-path: var(--layer-shape-clip, none);
    }
}

.c-underlying {
    @include underlying-layer;
}

.c-underlying__shaped {
    @include shaped-from-main;
}

.c-overlaying {
    @include overlaying-layer;
}

.c-overlaying [data-axis] {
    pointer-events: auto;
}