﻿@set hue < std-hslider-base {
  :root {
    display: block;
    background: linear-gradient(to right,red 0%,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%);
    background-clip: content-box;
    background-repeat: no-repeat;
    background-position: 0 0;
    //border-radius: 5dip;
    height: 20dip;
    width: *;
    cursor: text;
  }

  :root > knob {
    width: 8dip;
    height: 24dip;
    box-shadow: #aaa 1dip 1dip 1dip;
    background: hsv(var(hue-color), 100%, 100%);
    border-left: 2dip solid white;
    border-right: 2dip solid white;
    padding: none;
    cursor: pointer;
  }
}

@set picker
{
  :root {
    margin: 12dip;
    border: 1px solid black;
    size: 200dip 200dip;
    margin: 0;
    padding: none;
    var(hue-color): 0deg;
    behavior: clickable;
  }
  
  :root > widget {
    display: block;
    size: *;
    flow: stack;
    cursor: crosshair;
    position: relative;
  }
  
  :root > widget > #palette {
    background: linear-gradient(to left, hsv(var(hue-color),100%,100%), hsv(var(hue-color),0%,100%));
    foreground: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,1));
    //background: linear-gradient(to left, hsl(var(hue-color),100,50), hsl(var(hue-color),0,100));
    //foreground: linear-gradient(180deg, rgba(0,0,0, 0), rgba(0,0,0,1));
    size: *;
    margin: 0;
    padding: none;
    overflow: hidden;
  }
  
  :root > widget > #marker {
    position: absolute;
    size: 12dip;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    border: 2dip solid white;
  }

}