.gradient-editor {
    position: relative;
    user-select: none;

    .tools {
        padding: 4px 6px;
    }

    .unit {
        display: grid;
        grid-template-columns: 110px 35px 50px;
        grid-column-gap: 5px;
        font-size: 11px;

        input,select {
            width: 100%;
            box-sizing: border-box;
        }

        input {
            width: 35px;
        }
    }

    [data-editor] {
        display: none;
        margin-top: 2px;

        > label {
            font-size: 11px;
        }

    }

    &:not([data-selected-editor*='static-gradient']) {
        [data-editor='gradient'],
        [data-editor='tools'] {
            display: block;
        }
    }

    &[data-selected-editor='linear-gradient'], 
    &[data-selected-editor='repeating-linear-gradient'], 
    &[data-selected-editor='conic-gradient'], 
    &[data-selected-editor='repeating-conic-gradient']
    {
        [data-editor='angle']
        {
            display: block;
        }
    }        

    &[data-selected-editor='radial-gradient'], 
    &[data-selected-editor='repeating-radial-gradient'], 
    &[data-selected-editor='conic-gradient'], 
    &[data-selected-editor='repeating-conic-gradient']
    {
        [data-editor='centerX'],
        [data-editor='centerY']
        {
            display: block;
        }
    }             
    
    
    &[data-selected-editor='radial-gradient'], 
    &[data-selected-editor='repeating-radial-gradient']
    {
        [data-editor='radialType']
        {
            margin-top: 5px;
            display: grid;
            grid-template-columns: 110px 90px; 
            grid-column-gap: 2px; 

            select {
                width: 100%;
            }
        }        
    }          

    .sub-editor {
        padding: 0px 8px;
    }

    .gradient-steps {
        position: relative;
        height: 30px;
    }

    .hue-container,
    .hue {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 4px;
        height: 14px;
        border-radius: 10px;
        border:1px solid $border-color;
        box-sizing: border-box;
        @include transparent-background();
        pointer-events: all;
    }

    .hue {
        pointer-events: none;
        .step-list {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left:0px;
            border-radius: 10px;
            pointer-events: none;   
            
            @for $selectValue from 0 to 20 {
                &[data-selected-index="#{$selectValue}"] {
                    [data-index="#{$selectValue}"] {
                        border:0px;
                        transform: translateX(-50%) translateY(calc(100%));

                        .arrow {
                            display: block; 
                        }
                    }
                }
            }


            .step {
                pointer-events: all;
                width: 10px;
                height: 10px; 
                border: 1px solid white;
                box-sizing: border-box;
                display: inline-block;
                position: absolute;
                top: 50%;
                border-radius: 100%;
                box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.5);                

                &[data-cut='true'] {
                    border-radius: 0%;

                    .color-view {
                        border-radius: 0%;
                    }
                }

                transform: translateX(-50%) translateY(-50%);
                @include transparent-background();

                .color-view {
                    position: absolute;
                    left: 0px;
                    top:0px;
                    bottom:0px;
                    right:0px;
                    border-radius: 100%;
                    pointer-events: none;                    
                }

                .arrow {
                    position: absolute;
                    left: 50%;
                    display: none;
                    top:0%;
                    width:5px;
                    height:5px;
                    transform: translateX(-50%) translateY(-120%);
                    pointer-events: none;        
                    clip-path: polygon(40% 0%, 60% 0%, 60% 100%, 40% 100%);                    
                }
            }      
        }
    }

    $range-thumb-width: 10px;
    $range-thumb-height: 10px;
    $range-thumb-color:  #556375;

    input[type=range] {
        appearance: none;
        width: 100%;
        margin: 6.2px 0;
        background-color: transparent;
    }
    input[type=range]:focus {
        outline: none;
    }
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 1px;
        cursor: pointer;
        background: $range-thumb-color;
        border-radius: 0px;
        border: 0px solid #010101;
    }
    input[type=range]::-webkit-slider-thumb {
        height: $range-thumb-width;
        width: $range-thumb-width;
        border-radius: 10px;
        background: $range-thumb-color;
        cursor: pointer;
        appearance: none;
        margin-top: -5px;
    }
    input[type=range]:focus::-webkit-slider-runnable-track {
        background: #3174ad;
    }
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 1px;
        cursor: pointer;
        background: $range-thumb-color;
        border-radius: 0px;
        border: 0px solid #010101;
    }
    input[type=range]::-moz-range-thumb {
        border: 1px solid #000000;
        height: $range-thumb-width;
        width: $range-thumb-height;
        border-radius: 9px;
        background: $range-thumb-color;
        cursor: pointer;
    }
    input[type=range]::-ms-track {
        width: 100%;
        height: 1px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
    }
    input[type=range]::-ms-fill-lower {
        background: $range-thumb-color;
        border: 0px solid #010101;
        border-radius: 0px;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    }
    input[type=range]::-ms-fill-upper {
        background: $range-thumb-color;
        border: 0px solid #010101;
        border-radius: 0px;
    }
    input[type=range]::-ms-thumb {
        height: $range-thumb-width;
        width: $range-thumb-height;
        border-radius: 9px;
        background: $range-thumb-color;
        cursor: pointer;
    }
    input[type=range]:focus::-ms-fill-lower {
        background: $range-thumb-color;
    }
    input[type=range]:focus::-ms-fill-upper {
        background: $range-thumb-color;
    }
    
}