.colorex{--border-width:2px;--border-color:#d3d3d3;--selector-border-color:#fff;--space-between:16px;--gradient-selector-size:30px;--gradient-size:300px;--picker-selector-size:14px;--picker-size:40px;--alpha-background:#eee;display:-webkit-box;display:-ms-flexbox;display:flex}.colorex,.colorex *,.colorex:after,.colorex :after,.colorex:before,.colorex :before{-webkit-box-sizing:initial;box-sizing:initial}.colorex.column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.colorex:not(.column){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.colorex .alpha,.colorex .gradient,.colorex .rainbow{position:relative;border:var(--border-width) solid var(--border-color);margin:calc(var(--space-between)/2)}.colorex .selector{position:absolute;border:var(--border-width) solid var(--selector-border-color);-webkit-box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);-webkit-transition:left .2s ease,top .2s ease;transition:left .2s ease,top .2s ease;z-index:1}.colorex .gradient{width:var(--gradient-size);height:var(--gradient-size)}.colorex .gradient .selector{width:var(--gradient-selector-size);height:var(--gradient-selector-size);border-radius:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:2}.colorex .alpha:not(.horizontal),.colorex .rainbow:not(.horizontal){width:var(--picker-size);height:var(--gradient-size)}.colorex .alpha.horizontal,.colorex .rainbow.horizontal{width:var(--gradient-size);height:var(--picker-size)}.colorex .alpha:not(.horizontal) .selector,.colorex .rainbow:not(.horizontal) .selector{width:calc(100% + var(--border-width) + var(--border-width));height:var(--picker-selector-size);-webkit-transform:translate(calc(0px - var(--border-width) - var(--border-width)),-50%);transform:translate(calc(0px - var(--border-width) - var(--border-width)),-50%)}.colorex .alpha.horizontal .selector,.colorex .rainbow.horizontal .selector{height:calc(100% + var(--border-width) + var(--border-width));width:var(--picker-selector-size);top:0;-webkit-transform:translate(-50%,calc(0px - var(--border-width) - var(--border-width)));transform:translate(-50%,calc(0px - var(--border-width) - var(--border-width)))}.colorex .alpha canvas{background-color:var(--alpha-background)}