@track-inset: {
    @s: 0.625rem;
    @m: 0.75rem;
    @l: 1rem;
};

@thumb-diameter: var(--tui-thumb-size, 0.75rem);
@thumb-radius: calc(@thumb-diameter / 2);
@track-thickness: max(calc(@thumb-radius - 0.25rem), 0.125rem);

.tui-slider-ticks-labels() {
    --t-offset: @thumb-radius;

    display: flex;
    font: var(--tui-typography-body-s);
    color: var(--tui-text-secondary);
    margin: 0.25rem var(--t-offset) 0;

    & > * {
        position: relative;
        flex: 2;
        text-align: center;

        &:first-child {
            inset-inline-start: calc(-1 * var(--t-offset));
            flex: 1;
            text-align: start;
        }

        &:last-child {
            inset-inline-end: calc(-1 * var(--t-offset));
            flex: 1;
            text-align: end;
        }
    }

    tui-range + & {
        --t-offset: @thumb-diameter;
    }

    /* TODO: add :has([tuiInputSlider]) */
    tui-textfield[data-size='l'] + & {
        --t-offset: calc(@track-inset[@l] + @thumb-radius);
    }

    /* TODO: add :has([tuiInputSlider]) */
    tui-textfield[data-size='m'] + & {
        --t-offset: calc(@track-inset[@m] + @thumb-radius);
    }

    /* TODO: add :has([tuiInputSlider]) */
    tui-textfield[data-size='s'] + & {
        --t-offset: calc(@track-inset[@s] + @thumb-radius);
    }

    tui-input-range[data-size='l'] + & {
        --t-offset: calc(@track-inset[@l] + @thumb-diameter);
    }

    tui-input-range[data-size='m'] + & {
        --t-offset: calc(@track-inset[@m] + @thumb-diameter);
    }

    tui-input-range[data-size='s'] + & {
        --t-offset: calc(@track-inset[@s] + @thumb-diameter);
    }
}