.picker_wrapper {
    box-sizing: border-box;
    background: $color-bg;
    @include border-deco();

    cursor: default;
    font-family: sans-serif;
    color: #444;

    //Needed for the default popup behavior, where the parent is temporarily disabled via "pointer-events: none"
    pointer-events: auto;
    //The wrapper needs to be focusable (via `tabindex`), or else the popup loses focus
    //if you click anywhere on the picker's background, and closeHandler() closes the popup.
    //However, we don't want all the decoration:
    &:focus { outline: none; }
    
    //Align borders with the other elements' border-deco():
    button, input {
        margin: -1px;
    }
}


.picker_selector {
    position: absolute;
    z-index: 1; //On top of nearby sliders
    display: block;
    transform: translate(-50%, -50%);
    
    border: 2px solid white;
    border-radius: 100%;
    
    box-shadow: 0 0 3px 1px #67b9ff;
    background: currentColor;
    cursor: pointer;
}

.picker_slider .picker_selector {
    border-radius: 2px;
}


.picker_hue {
    position: relative;
    
    background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
    @include border-deco();
}


.picker_sl {
    $desat:  #808080;
    //https://css-tricks.com/thing-know-gradients-transparent-black/
    $desat0: rgba($desat, 0);
    $white0: rgba( white, 0);
    $black0: rgba( black, 0);
    
    position: relative;
    
    @include border-deco();
    background-image:
        /*
          Different SL pickers
          https://en.wikipedia.org/wiki/HSL_and_HSV
        */
        
        //HSV
        //linear-gradient( 0deg, black, $black0),
        //linear-gradient(90deg, white, $white0);
        
        //HSL:
        linear-gradient(180deg, white,  $white0 50%), 
        linear-gradient(  0deg, black,  $black0 50%), 
        linear-gradient( 90deg, $desat, $desat0);
        
        //Hue, chroma, lightness (almost):
        //linear-gradient( 45deg, #eee   50%, transparent 50%), //Masking the triangle
        //linear-gradient(135deg, white   0%, $white0  50%),   //Lightness, white
        //linear-gradient(-45deg, black   0%, $black0  50%),  //Lightness, black
        //linear-gradient( 45deg, $desat 50%, $desat0 100%); //Saturation
}


.picker_alpha, .picker_sample {
    position: relative;
    
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E") left top / contain white;
    @include border-deco();
    
    .picker_selector {
        background: none;
    }
}


.picker_editor {
    input {
        box-sizing: border-box;
        font-family: monospace;
        padding: .1em .2em;
    }
}


.picker_sample {

    &::before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background: currentColor;
    }
}


.picker_done button {
    box-sizing: border-box;
    padding: .2em .5em;
    cursor: pointer;
}