:host{
    --width: 300px;
    --height: 0.25rem;
    --opacity: 0.4;

    --panel-bg: #CBD5E1;
    --panel-bg-hover: #94A3B8;
    --panel-bg-fill: #475569;
    --panel-bg-border-radius: 1rem;

    --pointer-width: 1rem;
    --pointer-height: 1rem;

    --pointer-bg: #fff;
    --pointer-bg-hover: #dcdcdc;
    --pointer-bg-focus: #dcdcdc;

    --pointer-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    --pointer-shadow-hover: 0 0 2px rgb(0, 0, 0);
    --pointer-shadow-focus: var(--pointer-shadow-hover);

    --pointer-border: 1px solid hsla(0, 0%, 88%, 0.5);
    --pointer-border-hover: 1px solid #94A3B8;
    --pointer-border-focus: var(--pointer-border-hover);
    --pointer-border-radius: 100%;

    --animate-onclick: 0.3s;
}

:host{
    max-width: 100%;
}

.range-slider-box{
    display: flex;
    position: relative;
    flex-direction: column;
}

.range-slider{
    position: relative;
    width: var(--width, 100%);
    height: var(--height, 0.25rem);
    touch-action: none;
    max-width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.row{
    width: 100%;
    display: flex;
    align-items: center;
}

.range-slider.disabled{
    opacity: var(--opacity, 0.4);
    cursor: default;
}

.pointer.disabled{
    filter: brightness(0.8);
    cursor: default;
}

.range-slider * {
    box-sizing: border-box;
}

.container{
    position: absolute;
    width: 100%;
    height: 100%;
}

.panel{
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: var(--panel-bg, #2D4373);
    border-radius: var(--panel-bg-border-radius, 1rem);
    overflow: hidden;
    transition: 0.3s all ease;
}

.panel-fill{
    background: var(--panel-bg-fill, #000);
    border-radius: var(--panel-bg-border-radius, 1rem);
    overflow: hidden;
    height: 100%;
    position: absolute;
    z-index: 10;
}

.panel:hover{
    background: var(--panel-bg-hover, #5f79b7);
}

.disabled .panel:hover{
    background: var(--panel-bg, #5f79b7);
}

.pointer{
    position: absolute;
    z-index: 20;
    outline: none;
    top: 50%;
    transform: translateY(-50%);
}

.pointer-shape{
    background: var(--pointer-bg, #fff);
    background-size: contain;
    box-shadow: var(--pointer-shadow);
    border: var(--pointer-border);
    border-radius: var(--pointer-border-radius, 100%);
    transform: translateX(-50%);
    width: var(--pointer-width, 15px);
    height: var(--pointer-height, 15px);
    transition: 0.3s all ease;
}

.pointer-shape:hover{
    background: var(--pointer-bg-hover, #fff);
    background-size: contain;
    border: var(--pointer-border-hover);
    box-shadow: var(--pointer-shadow-hover);
}

.disabled .pointer-shape:hover{
    background: var(--pointer-bg, #fff);
    background-size: contain;
    border: var(--pointer-border);
    box-shadow: var(--pointer-shadow);
}

.pointer:focus .pointer-shape{
    background: var(--pointer-bg-focus, #fff);
    background-size: contain;
    border: var(--pointer-border-focus);
    box-shadow: var(--pointer-shadow-focus);
}

.disabled .pointer:focus .pointer-shape{
    background: var(--pointer-bg, #fff);
    background-size: contain;
    border: var(--pointer-border);
    box-shadow: var(--pointer-shadow);
}

/**
 ----------------- Vertical --------------------
 */
.type-vertical .range-slider{
    --width: 0.25rem;
    --height: 300px;
    max-height: 100%;
}

.type-vertical .range-slider .pointer{
    left: 50%;
}

.type-vertical .range-slider .panel-fill{
    width: 100%;
}

.type-vertical.range-slider-box{
    flex-direction: row;
}

.type-vertical .row{
    flex-direction: column;
}

/**
 animations
 */
.animate-on-click .pointer,
.animate-on-click .panel-fill{
    transition: all var(--animate-onclick);
}

/**
 range dragging
 */
.range-dragging .panel-fill{
    cursor: move;
}