@property --slider-from {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}
@property --slider-to {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}


:root {
    --slider-thumb-padding: var(--space);

    --linemark-width: .1875rem;
    --linemark-height: 1.25rem;
}

.project_range {
    display: flex;
    flex-direction: column;
}

.project_range .spot_buttons {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    min-height: calc(2 * var(--bar-height));
}

.project_range .spot_buttons button {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 var(--bar-height) 0;
    position: relative;
    cursor: pointer;
    font-weight: var(--font-weight-bold);
    font-style: normal;
    font-variation-settings: "slnt" 0;
}

.project_range .spot_buttons button:nth-child(1):hover,
.project_range .spot_buttons button:nth-child(1):focus-visible {
    color: var(--projects-color1);
}

.project_range .spot_buttons button:nth-child(2):hover,
.project_range .spot_buttons button:nth-child(2):focus-visible {
    color: var(--projects-color2);
}

.project_range .spot_buttons button:nth-child(3):hover,
.project_range .spot_buttons button:nth-child(3):focus-visible {
    color: var(--projects-color3);
}

.project_range .spot_buttons button::after {
    content: " ";
    position: absolute;
    /* top: 100%; */
    bottom: calc(0px - var(--bar-height) + var(--linemark-width));
    height: calc(var(--linemark-height) - var(--linemark-width));
    width: var(--linemark-width);
}

.project_range .spot_buttons button:nth-child(1)::after {
    background-color: var(--projects-color1);
    left: var(--space);
}

.project_range .spot_buttons button:nth-child(2)::after {
    background-color: var(--projects-color2);
    left: calc(50% - (var(--linemark-width) / 2));
}

.project_range .spot_buttons button:nth-child(3)::after {
    background-color: var(--projects-color3);
    right: var(--space);
}

.project_range .sliders_control {
    padding: 0 var(--spektrum-side-padding);
    background-image: var(--spektrum);
    background-size: 100% var(--bar-height);
    background-repeat: no-repeat;
    margin: 0 calc(0px - var(--space)) calc(var(--bar-height) - var(--linemark-height));
}

.project_range .sliders_control_inner {
    position: relative;
    height: calc(var(--bar-height) + var(--linemark-height));
}

.sliders_control__custom-thumbs {
    position: relative;
    margin-right: var(--linemark-width);
    /* height: 1rem; */
}

.sliders_control__from_slider--custom-thumb,
.sliders_control__to_slider--custom-thumb {
    position: absolute;
    padding: 0 var(--slider-thumb-padding);
    width: var(--linemark-width);
    /* background: rgba(0, 0, 0, .2); */
    z-index: 3;
    display: flex;
    flex-direction: column;
    --line-padding: calc(var(--linemark-width) * 2 / 3);
    pointer-events: none;
}

.animate-slider-thumbs .sliders_control__from_slider--custom-thumb,
.animate-slider-thumbs .sliders_control__to_slider--custom-thumb {
    transition: left .3s;
}

.sliders_control__from_slider--custom-thumb {
    left: calc((100% * ((var(--slider-min) - var(--slider-from)) / (var(--slider-min) - var(--slider-max)))) - var(--slider-thumb-padding));
    /* left: calc(var(--from) - var(--slider-thumb-padding)); */
}

.sliders_control__to_slider--custom-thumb {
    left: calc((100% * ((var(--slider-min) - var(--slider-to)) / (var(--slider-min) - var(--slider-max)))) - var(--slider-thumb-padding));
    /* left: calc(var(--to) - var(--slider-thumb-padding)); */
}

.sliders_control__from_slider--custom-thumb::before,
.sliders_control__to_slider--custom-thumb::before {
    content: " ";
    display: block;
    height: var(--bar-height);

    --line-proportion: 68; /* 68% */
    --gap-proportion: 32; /* 32% */
    --number-of-lines: 5;

    --available-length: calc(((var(--line-proportion) + var(--gap-proportion)) * var(--number-of-lines)) - var(--gap-proportion));
    --dotted-line-length: calc(var(--line-proportion) / var(--available-length));
    --gap-length: calc(var(--gap-proportion) / var(--available-length));

    background-image: repeating-linear-gradient(
        rgba(255, 255, 255, .6) 0%,
        rgba(255, 255, 255, .6) calc(var(--dotted-line-length) * 100%),
        transparent calc(var(--dotted-line-length) * 100%),
        transparent calc((var(--dotted-line-length) + var(--gap-length)) * 100%)
    );

    /* background-image: linear-gradient(
        rgba(255, 255, 255, .6) calc(((var(--dotted-line-length) * 1) + (var(--gap-length) * 0)) * 100%),
        transparent calc(((var(--dotted-line-length) * 1) + (var(--gap-length) * 0)) * 100%),
        transparent calc(((var(--dotted-line-length) * 1) + (var(--gap-length) * 1)) * 100%),
        rgba(255, 255, 255, .6) calc(((var(--dotted-line-length) * 1) + (var(--gap-length) * 1)) * 100%),
        rgba(255, 255, 255, .6) calc(((var(--dotted-line-length) * 2) + (var(--gap-length) * 1)) * 100%),
        transparent calc(((var(--dotted-line-length) * 2) + (var(--gap-length) * 1)) * 100%),
        transparent calc(((var(--dotted-line-length) * 2) + (var(--gap-length) * 2)) * 100%),
        rgba(255, 255, 255, .6) calc(((var(--dotted-line-length) * 2) + (var(--gap-length) * 2)) * 100%),
        rgba(255, 255, 255, .6) calc(((var(--dotted-line-length) * 3) + (var(--gap-length) * 2)) * 100%),
        transparent calc(((var(--dotted-line-length) * 3) + (var(--gap-length) * 2)) * 100%),
        transparent calc(((var(--dotted-line-length) * 3) + (var(--gap-length) * 3)) * 100%),
        rgba(255, 255, 255, .6) calc(((var(--dotted-line-length) * 3) + (var(--gap-length) * 3)) * 100%),
        rgba(255, 255, 255, .6) calc(((var(--dotted-line-length) * 4) + (var(--gap-length) * 3)) * 100%),
        transparent calc(((var(--dotted-line-length) * 4) + (var(--gap-length) * 3)) * 100%),
        transparent calc(((var(--dotted-line-length) * 4) + (var(--gap-length) * 4)) * 100%),
        rgba(255, 255, 255, .6) calc(((var(--dotted-line-length) * 4) + (var(--gap-length) * 4)) * 100%)
    ); */
    
    background-size: 100% calc(var(--bar-height) - (var(--line-padding) * 2));
    background-position: 0 var(--line-padding);
    background-repeat: no-repeat;
}

.sliders_control__from_slider--custom-thumb::after,
.sliders_control__to_slider--custom-thumb::after {
    content: " ";
    display: block;
    margin-top: var(--line-padding);
    height: calc(var(--linemark-height) - var(--line-padding));
    background-image: var(--spektrum);
    background-size: 100vw 100vh;
    background-attachment: fixed;
}

.project_range input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all;
    width: calc((var(--slider-thumb-padding) * 2) + var(--linemark-width));
    height: calc(var(--space) + var(--linemark-height));
    cursor: pointer;
    outline: 0;
    border: 0;
    border-radius: 0;
    opacity: 0;
    cursor: url('arrow-left-right.svg') 21 10, pointer;
}

.project_range[style*="--slider-from: 0;"] input[type=range].sliders_control__from_slider::-webkit-slider-thumb,
.project_range[style*="--slider-to: 0;"] input[type=range].sliders_control__to_slider::-webkit-slider-thumb {
    cursor: url('arrow-right.svg') 11 5, pointer;
}

.project_range[style*="--slider-from: 1000;"] input[type=range].sliders_control__from_slider::-webkit-slider-thumb,
.project_range[style*="--slider-to: 1000;"] input[type=range].sliders_control__to_slider::-webkit-slider-thumb {
    cursor: url('arrow-left.svg') 11 5, pointer;
}

.project_range input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all;
    width: calc((var(--slider-thumb-padding) * 2) + var(--linemark-width));
    height: calc(var(--space) + var(--linemark-height));
    cursor: pointer;  
    outline: 0;
    border: 0;
    border-radius: 0;
    opacity: 0;
    cursor: url('arrow-left-right.svg') 21 10, pointer;
}

.project_range[style*="--slider-from: 0;"] input[type=range].sliders_control__from_slider::-moz-range-thumb,
.project_range[style*="--slider-to: 0;"] input[type=range].sliders_control__to_slider::-moz-range-thumb {
    cursor: url('arrow-right.svg') 11 5, pointer;
}

.project_range[style*="--slider-from: 1000;"] input[type=range].sliders_control__from_slider::-moz-range-thumb,
.project_range[style*="--slider-to: 1000;"] input[type=range].sliders_control__to_slider::-moz-range-thumb {
    cursor: url('arrow-left.svg') 11 5, pointer;
}

.project_range input[type="range"] {
    -webkit-appearance: none; 
    appearance: none;
    height: 100%;
    width: calc(100% + (var(--slider-thumb-padding) * 2));
    position: absolute;
    background-color: transparent !important;
    background: transparent !important;
    pointer-events: none;
    margin: 0 calc(0px - var(--slider-thumb-padding));
    padding: 0;
}

.project_range #fromSlider {
    height: 0;
    z-index: 1;
}

.project_range .additional_controls {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding-bottom: var(--bar-height);
    min-height: var(--bar-height);
}

.project_range .additional_controls_inner {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: wrap;
    /* gap: var(--space); */
    column-gap: var(--font-size-small);
    row-gap: var(--font-size-small);
    font-size: var(--font-size-small);
}

.project_range .additional_controls button {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    /* line-height: 1em; */
}

.project_range .additional_controls button:hover,
.project_range .additional_controls button:focus-visible {
    color: var(--rotating-spectrum-color);
}

.project_range .additional_controls label {
    position: relative;
    cursor: pointer;
}
.project_range .additional_controls label > span {
    display: inline-block;
}

.project_range .additional_controls label:hover,
.project_range .additional_controls label:has(> input:focus-visible) {
    color: var(--rotating-spectrum-color);
}

.project_range .additional_controls label input[type="radio"] {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    opacity: .0001;
}

.project_range .additional_controls label input[type="radio"]:checked ~ span {
    font-weight: var(--font-weight-bold);
}

.project_range .additional_controls_inner > div {
    display: flex;
}

.project_range .additional_controls_inner > div > :nth-child(1n+2)::before {
    content: "/";
    color: var(--color-default);
    /* pointer-events: none; */
    display: inline-block;
    /* cursor: text; */
    margin-inline: .075em;
}