/* Styles for CallBar component */
@layer components {
    .call-bar {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 90;
        padding: var(--space-2xs) var(--space-2xs) calc(var(--space-2xs) + env(safe-area-inset-bottom));
        background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
        backdrop-filter: blur(10px);
        border-block-start: 1px solid var(--color-border-accent);

        &[hidden] {
            display: none;
        }

        &[data-state="visible"] {
            animation: call-bar-in var(--duration-base) var(--ease-punch);
        }

        & .call-bar__link {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2xs);
            /* The whole strip is the tap target, not just the words. */
            min-block-size: 3.25rem;
            background-color: var(--color-accent);
            color: var(--color-on-accent);
            font-size: var(--size-step--1);
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            text-decoration: none;

            &:active {
                background-color: var(--color-accent-soft);
            }
        }

        & .call-bar__icon {
            font-size: 1.25em;
        }
    }

    @keyframes call-bar-in {
        from {
            translate: 0 100%;
        }
    }

    /* Above 48rem the header keeps a permanent call button - two would be noise. */
    @media (width >= 48rem) {
        .call-bar {
            display: none;
        }
    }
}