.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; }
    
    //Reset custom styles on certain Firefox installs (#21)
    button, input {
        box-sizing: border-box;
        border: none;
        @include border-deco();
        
        outline: none;
        &:focus, &:active {
        	box-shadow: 0 0 2px 1px dodgerblue;
        }
    }
    button {
        padding: .4em .6em;
        cursor: pointer;

        background-color: whitesmoke;
        background-image: linear-gradient(0deg, gainsboro, transparent);
        &:active {
            background-image: linear-gradient(0deg, transparent, gainsboro);
        }
        &:hover {
            background-color: white;
        }
    }
}


.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;
    
    //Fails on strict CSP settings..
    //  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;
    $checker-dark: lightgrey;
    background: linear-gradient(45deg, $checker-dark 25%, transparent 25%, transparent 75%, $checker-dark 75%) 0 0 / 2em 2em,
                linear-gradient(45deg, $checker-dark 25%, white 25%, white 75%, $checker-dark 75%) 1em 1em / 2em 2em;
    @include border-deco();
    
    .picker_selector {
        background: none;
    }
}


.picker_editor {
    input {
        font-family: monospace;
        padding: .2em .4em;
    }
}


.picker_sample {

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