.dui-slider {
    --dui-slider-v-size: var(--dui-slider-size);
    --dui-slider-h-size: 100%;
    --dui-slider-track-v-size: var(--dui-slider-track-size);
    --dui-slider-track-h-size: 100%;
    --dui-slider-track-thumb-transform: translateX(0px);
    display: flex;
    align-items: center;
    gap: var(--dui-slider-gap);
    margin: var(--dui-slider-margin);
    position: relative;
}

.dui-slider.dui-vertical {
    --dui-slider-v-size: 100%;
    --dui-slider-h-size: var(--dui-slider-size);
    --dui-slider-track-v-size: 100%;
    --dui-slider-track-h-size: var(--dui-slider-track-size);
    --dui-slider-track-thumb-transform: translateX(-6px);
    --dui-slider-thumb-transform: translate(26px,0px);

    width: var(--dui-slider-h-size);
    height: var(--dui-slider-v-size);
    --dui-slider-margin: 0px;
}

.dui-slider .dui_prefix {
    order: 10;
}

.dui-slider-input {
    order: 20;
    flex-grow: 1;
}

.dui-vertical .dui-slider-input {
    writing-mode: vertical-lr;
    direction: rtl;
    flex-grow: unset;
}

.dui-slider .dui-postfix-addon {
    order: 30;
}
.dui-slider-input {
    height: var(--dui-slider-track-v-size);
    -webkit-appearance: none;
    margin: var(--dui-slider-input-margin);
    width: var(--dui-slider-track-h-size);
    background-color: transparent;
}
.dui-slider-input:focus {
    outline: none;
}

.dui-slider-input::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--dui-slider-track-size);
    cursor: var(--dui-slider-cursor);
    background-color: var(--dui-slider-track-background, var(--dui-accent-l-4));
    border-radius: var(--dui-slider-track-radius);
    box-shadow: var(--dui-slider-track-box-shadow);
    border: var(--dui-slider-track-border);
}

.dui-slider-input:focus::-webkit-slider-runnable-track {
    background-color: var(--dui-slider-track-focus-background, var(--dui-accent-l-3));
}

.dui-slider-input::-moz-range-track {
    width: 100%;
    height: var(--dui-slider-track-size);
    cursor: var(--dui-slider-cursor);
    box-shadow: var(--dui-slider-track-box-shadow);
    background: var(--dui-slider-track-background, var(--dui-accent-l-4));
    border-radius: var(--dui-slider-track-radius);
    border: var(--dui-slider-track-border);
}

.dui-slider-input::-ms-track {
    width: 100%;
    height: var(--dui-slider-track-size);
    cursor: var(--dui-slider-cursor);
    background-color: var(--dui-slider-track-background, var(--dui-accent-l-4));
    border: var(--dui-slider-track-border);
    border-radius: var(--dui-slider-track-radius);
    box-shadow: var(--dui-slider-track-box-shadow);
}

.dui-vertical .dui-slider-input::-webkit-slider-thumb {
    transform: var(--dui-slider-track-thumb-transform);
}
.dui-slider-input::-webkit-slider-thumb {
    border: var(--dui-slider-thumb-border);
    height: var(--dui-slider-thumb-height);
    width: var(--dui-slider-thumb-width);
    border-radius: var(--dui-slider-thumb-radius);
    background-color: var(--dui-slider-thumb-background, var(--dui-accent-l-1));
    cursor: var(--dui-slider-cursor);
    -webkit-appearance: none;
    margin: var(--dui-slider-thumb-margin);
}

.dui-slider-input::-moz-range-thumb {
    box-shadow: var(--dui-slider-thumb-box-shadow);
    border: var(--dui-slider-thumb-border);
    height: var(--dui-slider-thumb-height);
    width: var(--dui-slider-thumb-width);
    border-radius: var(--dui-slider-thumb-radius);
    background-color: var(--dui-slider-thumb-background, var(--dui-accent-l-1));
    cursor: var(--dui-slider-cursor);
}

.dui-slider-input::-ms-thumb {
    box-shadow: var(--dui-slider-thumb-box-shadow);
    border: var(--dui-slider-thumb-border);
    height: var(--dui-slider-thumb-height);
    width: var(--dui-slider-thumb-width);
    border-radius: var(--dui-slider-thumb-radius);
    background-color: var(--dui-slider-thumb-background, var(--dui-accent-l-1));
    cursor: var(--dui-slider-cursor);
}

.dui-slider-input::-ms-fill-lower {
    background-color: var(--dui-slider-track-background, var(--dui-accent-l-4));
    border: var(--dui-slider-track-border);
    border-radius: var(--dui-slider-track-radius);
    box-shadow: var(--dui-slider-track-box-shadow);
}

.dui-slider-input::-ms-fill-upper {
    background-color: var(--dui-slider-track-background, var(--dui-accent-l-4));
    border: var(--dui-slider-track-border);
    border-radius: var(--dui-slider-track-radius);
    box-shadow: var(--dui-slider-track-box-shadow);
}

.dui-slider-input:focus::-ms-fill-lower {
    background-color: var(--dui-slider-track-background, var(--dui-accent-l-4));
}

.dui-slider-input:focus::-ms-fill-upper {
    background-color: var(--dui-slider-track-background, var(--dui-accent-l-4));
}

.dui-slider-thumb {
    background-color: var(--dui-slider-thumb-background, var(--dui-accent-l-1));
    position: absolute;
    border: var(--dui-slider-thumb-border);
    height: var(--dui-slider-thumb-value-height);
    top: var(--dui-slider-thumb-value-top);
    margin: var(--dui-slider-thumb-value-margin);
    transform-origin: var(--dui-slider-thumb-transform-origin);
    transform: var(--dui-slider-thumb-transform);
    border-radius: var(--dui-slider-thumb-value-radius);
    width: var(--dui-slider-thumb-value-width);
}

.dui-slider-value {
    display: block;
    text-align: center;
    color: var(--dui-slider-thumb-value-color);
    padding: var(--dui-slider-thumb-value-padding);
    font: var(--dui-font-regular-sm);
}

.dui-slider.dui-slider-thumb-rounded {
    --dui-slider-thumb-transform: translate(-9px, -9px) rotate(-45deg);
    --dui-slider-thumb-transform-origin: 50% 50%;
    --dui-slider-thumb-value-transform: rotate(45deg);

    --dui-slider-thumb-value-padding: 5px 0 0 0;
    --dui-slider-thumb-text-indent: 6px;
    --dui-slider-thumb-value-height: 30px;
    --dui-slider-thumb-radius: 25px;
    --dui-slider-thumb-value-radius: 50% 50% 50% 0;
}

.dui-slider.dui-slider-thumb-rounded.dui-vertical {
    --dui-slider-thumb-transform: translate(15px, -23px) rotate(45deg);
    --dui-slider-thumb-value-transform: rotate(-45deg);
    --dui-slider-thumb-text-indent: 0px;
}

.dui-slider.dui-slider-thumb-flat {
    --dui-slider-thumb-transform: translate(-4px, -9px);
    --dui-slider-thumb-transform-origin: 50% 50%;
    --dui-slider-thumb-value-transform: none;

    --dui-slider-thumb-value-padding: var(--dui-spc-1);
    --dui-slider-thumb-text-indent: 0;
    --dui-slider-thumb-value-height: auto;
    --dui-slider-thumb-radius: 25px;
    --dui-slider-thumb-value-radius: 2px;
}

.dui-slider.dui-slider-thumb-flat.dui-vertical {
    --dui-slider-thumb-transform: translate(20px, -20px);
    --dui-slider-thumb-transform-origin: 50% 50%;
    --dui-slider-thumb-value-transform: none;

    --dui-slider-thumb-value-padding: var(--dui-spc-1);
    --dui-slider-thumb-text-indent: 0;
    --dui-slider-thumb-value-height: auto;
    --dui-slider-thumb-radius: 25px;
    --dui-slider-thumb-value-radius: 2px;
}
.dui-slider.dui-slider-thumb-flat.dui-vertical .dui-slider-thumb {
    top: calc(100% - 20px);
}


.dui-slider.dui-slider-thumb-rounded .dui-slider-value {
    transform: var(--dui-slider-thumb-value-transform);
    text-indent: var(--dui-slider-thumb-text-indent);
    width: var(--dui-slider-thumb-value-width);
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dui-slider.dui-slider-thumb-flat .dui-slider-thumb:after {
    content: '';
    position: absolute;
    left: 2px;
    top: var(--dui-spc-px-20);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid var(--dui-slider-thumb-background, var(--dui-accent-l-1));
    clear: both;
}

.dui-slider.dui-slider-thumb-flat.dui-vertical .dui-slider-thumb:after {
    content: '';
    position: absolute;
    left: -10px;
    top: 2px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left: 0 solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid var(--dui-slider-thumb-background, var(--dui-accent-l-1));
    clear: both;
}

.dui-slider.dui-slider-thumb-flat .dui-slider-thumb {
    width: fit-content;
    text-align: center;
    line-height: 100%;
    min-width: 24px;
}

.dui-slider.dui-slider-thumb-flat .dui-slider-value {
    transform: var(--dui-slider-thumb-value-transform);
    text-indent: var(--dui-slider-thumb-text-indent);
}