[data-component-slider] [data-ui-dac="lane"] { position: relative; }

[data-component-slider] [data-ui-dac="entries"] { position: absolute; top:0; left: 0; display: flex; transition: left 0.3s ease-out; }

[data-component-slider][data-axis="horizontal"] [data-ui-dac="entries"] { height:100%; flex-direction: row; }
[data-component-slider][data-axis="vertical"] [data-ui-dac="entries"] { width:100%; flex-direction: column; }


[data-component-slider].dragging [data-ui-dac="entries"] { transition: unset; }

[data-component-slider] [data-ui-dac="controls"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

[data-component-slider][data-unfilled] [data-ui-dac="controls"] { display: none; }

[data-component-slider] [data-ui-dac="controls"] [data-ui-dac="left"] { flex-shrink: 0; margin-left: 0.5rem; }
[data-component-slider] [data-ui-dac="controls"] [data-ui-dac="right"] { flex-shrink: 0; margin-right: 0.5rem; }
[data-component-slider] [data-ui-dac="controls"] [data-ui-dac="up"] { flex-shrink: 0; margin-top: 0.5rem; }
[data-component-slider] [data-ui-dac="controls"] [data-ui-dac="bottom"] { flex-shrink: 0; margin-left: 0.5rem; }

[data-component-slider] [data-ui-dac="controls"] [data-ui-dac="progress"] { gap: 1rem; }
[data-component-slider] [data-ui-dac="controls"] [data-ui-dac="progress"].dots { display: flex; }
[data-component-slider][data-axis="horizontal"] [data-ui-dac="controls"] [data-ui-dac="progress"].dots { flex-direction: row; }
[data-component-slider][data-axis="vertical"] [data-ui-dac="controls"] [data-ui-dac="progress"].dots { flex-direction: column; }

[data-component-slider] [data-ui-dac="controls"] [data-ui-dac="progress"].bar {}

[data-component-slider] [data-ui-dac="controls"] [data-ui-dac="progress"] [data-ui-dac="indicator"] {
    position: absolute;
    width: 1rem;
    height: 100%;
    left: 0;
    transition: left 0.3s ease-out;
}

[data-component-slider] [data-ui-dac="controls"] [data-ui-dac="progress"] .dot {
    position: relative;
    background-color: var(--outline);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.25rem;
    transition: width 0.2s ease-out,margin-right 0.2s ease-out,margin-left 0.2s ease-out;
    /*cursor: pointer;*/
}

[data-component-slider] [data-ui-dac="controls"] [data-ui-dac="progress"] .dot:hover {

}

[data-component-slider] [data-ui-dac="controls"] [data-ui-dac="progress"] .dot.current {
    background-color: var(--complementary);
    width: 1rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}