$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);

@mixin 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(map-get($track-inset, 'l') + $thumb-radius);
    }

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

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

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

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

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