@import '../../styles/_variables.scss';

$hue-background: linear-gradient(
        to top,
        #f00 0%,
        #ff0 17%,
        #0f0 33%,
        #0ff 50%,
        #00f 67%,
        #f0f 83%,
        #f00 100%
);
$hue-width: 20px;
$hue-height: 110px;

$arrow-width: 6px;
$arrow-color: $clickable-item;
$arrow-margin: 3px;

.main {
  position: relative;
  display: flex;
  flex-direction: column;

  .slider-input {
    opacity: 0;
    z-index: 2;
    position: absolute;
    // To "expand" the input width to include the arrows, so they would also be draggable
    width: $hue-width + $arrow-width * 2 + $arrow-margin * 2;
    right: -$arrow-margin;
    height: $hue-height;

    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
  }

  .hue-background {
    position: absolute;
    width: $hue-width;
    height: $hue-height;
    background: $hue-background;
    border-radius: 20px;
  }

  .arrow {
    box-sizing: content-box;
    position: relative;
    width: $hue-width + $arrow-width;
    height: 0;

    margin-top: auto;
    transform: translateY($arrow-width);

    left: -($arrow-width + $arrow-margin);
    border: $arrow-width solid transparent;
    border-left-color: $arrow-color;
    border-right-color: $arrow-color;
  }
}