// ColorPalette
// 
// Styling of the ColorPalette consists of the following:
// 
// 1. the whole color palette
//    .dijitColorPalette - for outline, border, and background color of the whole color palette
//    Note: outline does not work for IE
//
// 2. the color swatch 
//    .dijitColorPalette .dijitPaletteImg
//    transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
//    displays border around a color swatch
//
// 3. hovered swatch
//    .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg
//    the hovered state of the color swatch - adds border
//  
// 4. active and selected swatch
//    .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg
//    .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg
//    adds border for active or selected state
//
.#{$theme-name} {
  .dijitColorPalette {
    border: 1px solid $colorpalette-border;
    background-color: $colorpalette-bg;
    padding: $padding-base-vertical $padding-base-horizontal;
    .dijitPaletteTable {
      padding: 0;
    }
    .dijitPaletteImg {
      border: 1px solid transparent; //override border color property defined in dijit.css
      margin: 0; // override margin property defined in dijit.css
      padding: $colorpalette-color-spacing;
      .dijitColorPaletteSwatch {
        display: block;
        width: $colorpalette-color-width;
        height: $colorpalette-color-height;
        border: 1px solid $colorpalette-color-border-fallback;
        border: 1px solid $colorpalette-color-border;
      }
    }
    // Hover, Active & Selected states
    .dijitPaletteCell {
      &:hover,
      &:active,
      &.dijitPaletteCellSelected {
        $enlarge-increment: $colorpalette-color-spacing - 1px; // local variable 
        .dijitPaletteImg {
          border: 1px solid $Calcite_Gray_350;
          padding: $colorpalette-color-spacing - $enlarge-increment; // enlarge the hovered node
          margin: 0; // override margin property defined in dijit.css
          .dijitColorPaletteSwatch {
            width: $colorpalette-color-width + $enlarge-increment * 2;
            height: $colorpalette-color-height + $enlarge-increment * 2;
          }
        }
      }
    }
    // Selected state
    .dijitPaletteCell.dijitPaletteCellSelected {
      .dijitPaletteImg {
        border-color: $Calcite_Highlight_Blue_200;
      }
    }
  }
  // Color palette in a popup
  .dijitPopup.dijitColorPalettePopup {
    @include calcite-box-shadow-dropdown;
  }
}

