/* Styles for PhoneLink component */
@layer components {
    .phone-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2xs);
        text-decoration: none;
        transition: color var(--duration-fast) var(--ease-jab);

        & .phone-link__icon {
            flex: none;
            color: var(--color-accent);
        }

        & .phone-link__number {
            font-variant-numeric: tabular-nums;
        }

        /* Exception: inline in a paragraph - underlined so it reads as a link. */
        &[data-variant="inline"] {
            color: inherit;
            font-weight: 600;
            text-decoration: underline;
            text-decoration-color: var(--color-accent);
            text-decoration-thickness: 1px;
            text-underline-offset: 0.3em;

            &:hover {
                color: var(--color-accent);
            }
        }

        /* Exception: the headline number in the contact block. */
        &[data-variant="display"] {
            gap: var(--space-xs);
            color: var(--color-accent);
            font-family: var(--font-display);
            font-size: var(--size-step-2);
            letter-spacing: 0.02em;
            line-height: 1;

            & .phone-link__icon {
                font-size: 0.7em;
            }

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