$color-picker-popover-top: -8;
$color-picker-popover-top-px: #{$color-picker-popover-top}px;
$color-picker-popover-left: -90;
$color-picker-popover-left-px: #{$color-picker-popover-left}px;
$left-color-picker-popover-left: -120;
$left-color-picker-popover-left-px: #{$left-color-picker-popover-left}px;
$color-palette-height: 170px;
$color-palette-and-picker-height: 410px;

// https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
:export {
  colorPickerPopoverTop: $color-picker-popover-top;
  colorPickerPopoverLeft: $color-picker-popover-left;
  leftColorPickerPopoverLeft: $left-color-picker-popover-left;
}

// Palette Color Picker
.color-picker-palette-container {
  background: none !important;
  border: none !important;
  height: max-content;
  position: relative;
  width: 0 !important;

  &.with-arrow {
    top: - calc($color-palette-height / 2);

    .color-picker-palette {
      left: 0px;
      &.with-color-picker {
        left: 0px !important;
      }
    }
  }

  .color-picker-palette {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    background-color: white;
    border: 1px solid #d0d0d0;
    position: absolute;
    width: 108px;

    &.with-color-picker {
      width: 222px;
    }

    &.without-arrow {
      top: $color-picker-popover-top-px;
      left: $color-picker-popover-left-px;
    }

    &.left {
      left: -120px;
      &.with-color-picker {
        left: -235px !important;
      }
    }

    .color-swatch-palette {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;

      .color-swatch-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-gap: 2px;
        width: 100%;
        height: fit-content;

        .color-swatch-cell {
          width: 18px;
          height: 18px;
          margin: 1px;
          padding: 0;
          border: solid 1px #d0d0d0;
          &.selected {
            border: 1px solid #000;
            background-position: 50% 50%;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
            &.light {
              background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
            }
          }
        }
      }

      .color-swatch-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 30px;
        margin-top: 10px;
      }
    }

    .color-picker-container {
      .color-picker-footer {
        padding: 5px;
        justify-content: right;
        border-top-width: 1px;
        margin-top: 5px;
      }
    }
  }

  .palette-arrow {
    position: absolute;
    top: calc(($color-palette-height / 2) - 20px) !important;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid white;
    transform: translateY(-50%);

    &.left {
      transform: rotate(135deg) translate(10px, 12px) !important;
    }
  }
}
