/* 
    If you want to create new responsive font - you have to create
    6 local custome variables:
        - max-screen-width
        - max-font-size
        - max-line-height
        - min-screen-width
        - min-font-size
        - min-line-height
*/
[class*="responsive-font"] {
    /* Require props */
    --_max-font-size: var(--max-font-size);
    --_max-line-height: var(--max-line-height);
    --_max-screen-width: var(--max-screen-width);

    --_min-font-size: var(--min-font-size);
    --_min-line-height: var(--min-line-height);
    --_min-screen-width: var(--min-screen-width);
    /* ============= */

    /* Computed deltas */
    --font-delta: (var(--_max-font-size) - var(--_min-font-size));
    --line-height-delta: (var(--_max-line-height) - var(--_min-line-height));
    --screen-width-delta: (var(--_max-screen-width) - var(--_min-screen-width));
    /* =============== */

    --main-coef: (100vw - var(--_min-screen-width) * 1px) / var(--screen-width-delta);

    /* Target values */
    --computed-font-size: calc(var(--_min-font-size) * 1px + var(--font-delta) * var(--main-coef));
    --computed-line-height: calc(var(--_min-line-height) + var(--line-height-delta) * var(--main-coef));
    /* ============= */

    font-size: clamp(calc(var(--_min-font-size) * 1px), var(--computed-font-size), calc(var(--_max-font-size) * 1px));
    line-height: clamp(calc(var(--_min-line-height) * 1px), var(--computed-line-height), calc(var(--_max-font-size) * 1px));
}

.responsive-font__M {
    --max-screen-width: var(--desktop-size-max);
    --max-font-size: 20;
    --max-line-height: 26;

    --min-screen-width: var(--tablet-size-max);
    --min-font-size: 18;
    --min-line-height: 22;

    @media (max-width: 1024px) and (min-width: 510px) {
        --max-screen-width: var(--tablet-size-max);
        --max-font-size: 18;
        --max-line-height: 22;

        --min-screen-width: var(--mobile-size-max);
        --min-font-size: 16;
        --min-line-height: 20;
    }

    @media (max-width: 509px) {
        --max-screen-width: var(--mobile-size-max);
        --max-font-size: 16;
        --max-line-height: 20;

        --min-screen-width: var(--mobile-size-min);
        --min-font-size: 16;
        --min-line-height: 20;
    }
}

.responsive-font__XS {
    --max-screen-width: var(--desktop-size-max);
    --max-font-size: 14;
    --max-line-height: 20;

    --min-screen-width: var(--tablet-size-max);
    --min-font-size: 12;
    --min-line-height: 18;

    @media (max-width: 1024px) and (min-width: 510px) {
        --max-screen-width: var(--tablet-size-max);
        --max-font-size: 12;
        --max-line-height: 18;

        --min-screen-width: var(--mobile-size-max);
        --min-font-size: 10;
        --min-line-height: 16;
    }

    @media (max-width: 509px) {
        --max-screen-width: var(--mobile-size-max);
        --max-font-size: 10;
        --max-line-height: 16;

        --min-screen-width: var(--mobile-size-min);
        --min-font-size: 10;
        --min-line-height: 16;
    }
}