@mixin disable-selection {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Safari */
  -khtml-user-select: none;    /* Konqueror HTML */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

@mixin border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.color-picker {
  position: relative;
  z-index: 1000;
  width: 220px;
  height: auto;
  cursor: default;
  @include disable-selection;
  background-color: #fff;
  touch-action: none;
}

.color-picker * {
  @include border-box;
  margin: 0;
  font-size: 11px;
}

.color-picker input {
  width: 0;
  height: 26px;
  min-width: 0;

  font-size: 13px;
  text-align: center;
  color: #000;
}

.color-picker input:invalid,
.color-picker input:-moz-ui-invalid,
.color-picker input:-moz-submit-invalid {
  box-shadow: none;
}

.color-picker input::-webkit-inner-spin-button,
.color-picker input::-webkit-outer-spin-button {
  margin: 0;

  -webkit-appearance: none;
}

.color-picker .sliderCursor{
  width: 10px;
  border-radius: 5px;
  position: absolute;
  margin-top: -3px;
  border: 1px solid black;
}
.color-picker .sliderCursor > div {

  border: 2px solid white;
  border-radius: 5px;
}
.color-picker .sliderCursor > div > div {
  border-radius: 5px;
  border: 1px solid black;
  height: 15px;
}
.color-picker .cursor{
  position: absolute;
  width:21px;
  border:3px solid black;
  border-radius: 100%;
  margin:-2px 0 0 -2px;
}
.color-picker .cursor > div{
  height:15px;
  border:3px solid white;
  border-radius: 100%;
}

.color-picker .box {
  display: flex;
  padding: 4px 8px;
}

.color-picker .left {
  position: relative;

  padding: 16px 8px;
}

.color-picker .right {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;

  flex: 1 1 auto;

  padding: 12px 8px;
}

.color-picker .hue-alpha {
  align-items: center;
  margin-bottom: 3px;

}

.color-picker .hue {
  direction: ltr;
  width: 100%;
  height: 16px;
  margin-bottom: 16px;
  border: none;

  position: relative;
  cursor: pointer;
  background-size: 100% 100%;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwkUFWbCCAAAAFxJREFUaN7t0kEKg0AQAME2x83/n2qu5qCgD1iDhCoYdpnbQC9bbY1qVO/jvc6k3ad91s7/7F1/csgPrujuQ17BDYSFsBAWwgJhISyEBcJCWAgLhIWwEBYIi2f7Ar/1TCgFH2X9AAAAAElFTkSuQmCC');
}

.color-picker .value {
  direction: rtl;

  width: 100%;
  height: 16px;
  margin-bottom: 16px;
  border: none;

  cursor: pointer;
  background-size: 100% 100%;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAACTklEQVR42u3SYUcrABhA4U2SkmRJMmWSJklKJiWZZpKUJJskKUmaTFImKZOUzMySpGRmliRNJilJSpKSJEtmSpIpmWmSdO736/6D+x7OP3gUCoWCv1cqlSQlJZGcnExKSgqpqamkpaWRnp5ORkYGmZmZqFQqsrKyyM7OJicnh9zcXNRqNXl5eeTn56PRaCgoKKCwsJCioiK0Wi3FxcWUlJRQWlpKWVkZ5eXlVFRUUFlZiU6no6qqiurqampqaqitraWurg69Xk99fT0GgwGj0UhDQwONjY00NTXR3NxMS0sLra2ttLW10d7ejslkwmw209HRQWdnJ11dXXR3d9PT00Nvby99fX309/czMDDA4OAgFouFoaEhrFYrw8PDjIyMMDo6ytjYGDabjfHxcSYmJpicnGRqagq73c709DQzMzPMzs4yNzfH/Pw8DocDp9OJy+XC7XazsLDA4uIiS0tLLC8vs7KywurqKmtra3g8HrxeLz6fD7/fz/r6OhsbG2xubrK1tcX29jaBQICdnR2CwSC7u7vs7e2xv7/PwcEBh4eHHB0dcXx8zMnJCaenp5ydnXF+fs7FxQWXl5dcXV1xfX3Nzc0Nt7e33N3dEQqFuL+/5+HhgXA4TCQS4fHxkaenJ56fn3l5eeH19ZVoNMrb2xvv7+98fHwQi8WIx+N8fn6SSCT4+vri+/ubn58ffn9/+VcKgSWwBJbAElgCS2AJLIElsASWwBJYAktgCSyBJbAElsASWAJLYAksgSWwBJbAElgCS2AJLIElsP4/WH8AmJ5Z6jHS4h8AAAAASUVORK5CYII=');
}

.color-picker .alpha {
  direction: ltr;

  position: relative;
  width: 100%;
  height: 16px;
  border: none;

  cursor: pointer;
  background-size: 100% 100%;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwYQlZMa3gAAAWVJREFUaN7tmEGO6jAQRCsOArHgBpyAJYGjcGocxAm4A2IHpmoWE0eBH+ezmFlNvU06shJ3W6VEelWMUQAIIF9f6qZpimsA1LYtS2uF51/u27YVAFZVRUkEoGHdPV/sIcbIEIIkUdI/9Xa7neyv61+SWFUVAVCSct00TWn2fv6u3+Ecfd3tXzy/0+nEUu+SPjo/kqzrmiQpScN6v98XewfA8/lMkiLJ2WxGSUopcT6fM6U0NX9/frfbjev1WtfrlZfLhYfDQQHG/AIOlnGwjINlHCxjHCzjYJm/TJWdCwquJXseFFzGwDNNeiKMOJTO8xQdDQaeB29+K9efeLaBo9J7vdvtJj1RjFFjfiv7qv95tjx/7leSQgh93e1ffMeIp6O+YQjho/N791t1XVOSSI7N//K+4/GoxWLBx+PB5/Op5XLJ+/3OlJJWqxU3m83ovv5iGf8KjYNlHCxjHCzjYBkHy5gf5gusvQU7U37jTAAAAABJRU5ErkJggg==');
}


.color-picker .selected-color {
  position: absolute;
  top: 16px;
  left: 8px;

  width: 40px;
  height: 40px;
  /* border: 1px solid rgba(0,0,0,0.05); */
  -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
  box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
  border-radius: 50%;
}

.color-picker .selected-color-background {
  width: 40px;
  height: 40px;
  border-radius: 50%;

  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAh0lEQVRYR+2W0QlAMQgD60zdfwOdqa8TmI/wQMr5K0I5bZLIzLOa2nt37VVVbd+dDx5obgCC3KBLwJ2ff4PnVidkf+ucIhw80HQaCLo3DMH3CRK3iFsmAWVl6hPNDwt8EvNE5q+YuEXcMgkonVM6SdyCoEvAnZ8v1Hjx817MilmxSUB5rdLJDycZgUAZUch/AAAAAElFTkSuQmCC');
}

.color-picker .saturation-lightness {
  direction: ltr;
  cursor: crosshair;
  width: 100%;
  position: relative;
  height: 130px;
  border: none;
  touch-action: manipulation;
  background-size: 100% 100%;
  background-image: url('../../assets/greyscalegradient.png');
}