@import "./Common";

.colorselector {
  --colorselector--size: 20px;
  --colorselector--border-radius: 100%;

  --hue-current: 10;

  @include ComponentLayout;

  &:hover {
    .color-preview-wrapper {
      .color-preview {
        transform: scale(1.2);
      }
    }
  }

  label {
    @include LabelStyle;
  }

  .color-preview-wrapper {
    align-items: center;
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-grow: 1;
    justify-content: center;
    margin: 0;
    transform: scale(1);
  
    .color-preview {
      min-height: var(--colorselector--size);
      min-width: var(--colorselector--size);
      width: var(--colorselector--size);
      height: var(--colorselector--size);
      border-radius: var(--colorselector--border-radius);
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
      transition: box-shadow 300ms ease, transform 300ms ease;
      align-self: center;
    }

    .tool {
      width: 200px;
      height: 220px;
      left: calc(50% + 20px);
      position: absolute;
      background: white;
      display: flex;
      flex-direction: column;
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);

      .preview {
        height: 40px;
      }

      .panel {
        z-index: +9999;
        position: relative;
        background: white;
        flex-grow: 1;
        height: 180px;
        overflow: hidden;
        width: 100%;
        background: linear-gradient(
          90deg,
          hsl(var(--hue-current), 0%, 100%) 0%,
          hsl(var(--hue-current), 100%, 50%) 100%
        );
        .color {
          position: absolute;
          background: linear-gradient(
            180deg,
            hsla(var(--hue-current), 100%, 50%, 0%) 0%,
            hsla(var(--hue-current), 100%, 0%, 100%) 100%
          );
          width: 100%;
          height: 100%;
        }
        .selection {
          --size: 10px;
          pointer-events: none;
          width: var(--size);
          position: absolute;
          height: var(--size);
          margin-left: calc(var(--size) * -0.5);
          margin-top: calc(var(--size) * -0.5);
          border: 2px solid black;
          border-radius: 100%;
          cursor: move;
        }
      }

      .control {
        width: 100%;
        height: 14px;
        position: relative;
        overflow: hidden;

        .knob {
          background: transparent;
          position: absolute;
          width: 0;
          height: 14px;
          margin-left: -1px;
          pointer-events: none;
          border-left: 2px solid hsla(0, 0%, 0%, 0.2);
        }

        &.hue {
          background: linear-gradient(
            90deg,
            red 0,
            #ff0 17%,
            #0f0 33%,
            #0ff 50%,
            #00f 67%,
            #f0f 83%,
            red
          );
        }
        &.sat {
          background: linear-gradient(
            90deg,
            hsl(0, 0%, 100%) 0%,
            hsl(var(--hue-current), 100%, 50%) 100%
          );
        }
        &.val {
          background: linear-gradient(
            90deg,
            hsl(0, 0%, 0%) 0%,
            hsl(0, 0%, 100%) 100%
          );
        }
      }
    }
  }
}