@use "sass:math";

$color-bg: transparent; //#f2f2f2;

bs5-colorpicker {
  $width-gutter: 1em;
  $width-slider: 2em;

  border-radius: $border-radius;
  border: $border-width solid $border-color;

  box-sizing: border-box;
  background: $color-bg;

  cursor: default;
  font-family: sans-serif;
  color: #444;

  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: stretch;
  
  font-size: 10px;
  width: 25em;

  // Needed for the default popup behavior, where the parent is temporarily disabled via "pointer-events: none"
  pointer-events: auto;

  padding: math.div($width-slider, 2);
  > * {
    margin: math.div($width-slider, 2);
  }
  
  //https://stackoverflow.com/questions/29732575/line-break-in-multi-line-flexbox
  //We use this to insert a line break after .picker-alpha,
  //which lets us set .picker-sl to use all available space to the left of it (via flex-grow: 1),
  //and we don't have to calculate the exact width for .picker-sl.
  &::before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    order: 1;
  }

  //Always keep the editor on-screen, for screen readers:
  &.no_editor .picker-editor {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  .picker-slider, .picker-selector {
    padding: math.div($width-slider, 2);
  }
  
  .picker-hue {
    width: 100%;
    position: relative;
    border-radius: $border-radius;
    background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
  }
  
  .picker-sl {

    $desat:  #808080;
    //https://css-tricks.com/thing-know-gradients-transparent-black/
    $desat0: rgba($desat, 0);
    $white0: rgba( white, 0);
    $black0: rgba( black, 0);
  
    flex: 1 1 auto;

    border-radius: $border-radius;
    
    position: relative;
    
    background-image:
      /*
        Different SL pickers
        https://en.wikipedia.org/wiki/HSL_and_HSV
      */
      
      //HSV
      //linear-gradient( 0deg, black, $black0),
      //linear-gradient(90deg, white, $white0);
      
      //HSL:
      linear-gradient(180deg, white,  $white0 50%), 
      linear-gradient(  0deg, black,  $black0 50%), 
      linear-gradient( 90deg, $desat, $desat0);
      
      //Hue, chroma, lightness (almost):
      //linear-gradient( 45deg, #eee   50%, transparent 50%), //Masking the triangle
      //linear-gradient(135deg, white   0%, $white0  50%),   //Lightness, white
      //linear-gradient(-45deg, black   0%, $black0  50%),  //Lightness, black
      //linear-gradient( 45deg, $desat 50%, $desat0 100%); //Saturation
    
    //With variable width, we need a pseudo-element to make it a square, whatever size:
    &::before {
      content: '';
      display: block;
      padding-bottom: 100%;
    }
  }
  
  .picker-editor {
    order: 1;
    //width: 100%;
    width: 6.5rem;
    font-family: monospace;
  }
  
  .picker-done, .picker-cancel {
    order: 1;
  }

  //Since we use "em"s for layout here, restore the correct font-size on elements with text:
  // input, button {
  //   font-size: 1rem;
  //   margin: -1px;
  // }
  //The wrapper needs to be focusable (via `tabindex`), or else the popup loses focus
  //if you click anywhere on the picker's background, and closeHandler() closes the popup.
  //However, we don't want all the decoration:
  &:focus { outline: none; }

  .picker-selector {
    position: absolute;
    z-index: 1; //On top of nearby sliders
    display: block;
    transform: translate(-50%, -50%);
    
    border: 2px solid white;
    border-radius: 100%;
    
    box-shadow: 0 0 3px 1px #67b9ff;
    background: currentColor;
    cursor: pointer;
  }
  
  .picker-slider .picker-selector {
    border-radius: $border-radius;
  }
  
  .picker-alpha, .picker-sample {
    position: relative;
    border-radius: $border-radius;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E") left top / contain white;
    
    .picker-selector {
      background: none;
    }
  }
  
  .picker-sample {
    order: 1;
    flex: 1 1 auto;
    @include button-size(0, 0, $btn-font-size, $btn-border-radius);
    &::before {
      content: '';
      border-radius: $border-radius;
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      background: currentColor;
    }
  }

}