.twz-breadcrumbs {
    --breadcrumbs-color: var(--grey-200, #a3a3a3);
    --breadcrumbs-link-color: var(--grey-50, #e5e2e1);
    --breadcrumbs-active-color: var(--green-500, #5aad5a);
    --breadcrumbs-gap: 0.8rem;

    width: 100%;
    font-family: var(--font-base);
    font-size: var(--fs-14, 1.4rem);
    font-weight: 400;
    line-height: 1.4;

    .twz-breadcrumbs__nav {
        margin: 0;
    }

    :where(.rank-math-breadcrumb p) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--breadcrumbs-gap);
        margin: 0;
        color: var(--breadcrumbs-color);
    }

    :where(a) {
        color: var(--breadcrumbs-link-color);
        text-decoration: none;
        transition: color 0.2s ease;

        &:is(:hover, :focus-visible) {
            color: var(--breadcrumbs-active-color);
        }
    }

    :where(.last, .breadcrumb_last) {
        color: var(--breadcrumbs-active-color);
    }

    :where(.separator) {
        color: var(--breadcrumbs-color);
    }
}