.root {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: min-content;
    touch-action: none;
    user-select: none;
}

.root[data-orientation='vertical'] {
    flex-direction: column;
    height: 100%;
}

.track {
    position: relative;
    flex-grow: 1;
    height: 5px;
    background-color: var(--global-font-secondary-color);
    border-radius: 9999px;
}

.track[data-orientation='vertical'] {
    width: 5px;
}

.range {
    position: absolute;
    height: 100%;
    background-color: var(--global-primary-color);
    border-radius: 9999px;
}

.range[data-orientation='vertical'] {
    width: 100%;
    height: auto;
}

.thumb {
    position: relative;
    display: block;
    width: 1rem;
    height: 1rem;
    background-color: var(--global-font-color);
    border-radius: 10px;

    &:focus {
        outline: none;
    }
}

.thumb.tooltip {
    &::after {
        position: absolute;
        top: -24px;
        left: 50%;
        padding: var(--tooltip-padding);
        font-size: var(--tooltip-font-size);
        font-weight: var(--tooltip-font-weight);
        color: var(--tooltip-font-color);
        white-space: nowrap;
        content: attr(data-value);
        background-color: var(--tooltip-background-color);
        border-radius: var(--tooltip-border-radius);
        box-shadow: var(--tooltip-box-shadow);
        transform: translateX(-50%);
    }
}
