/*****************
 * Color Chooser *
 *****************/
// FIXME button.color in buttons section
colorswatch {
// take care of colorswatches on selected elements
  :selected & {
    box-shadow: none;
    &.overlay, &.overlay:hover {
      border-color: s_color(text);
    }
  }

  &:selected { box-shadow: none; }

  &.top,
  &.bottom,
  &.left, &:first-child:not(.overlay):not(.top),
  &.right, &:last-child:not(.overlay):not(.bottom),
  &:only-child:not(.overlay),
  &.top > .overlay,
  &.bottom > .overlay,
  &:first-child:not(.top) > .overlay,
  &:last-child:not(.bottom) > .overlay,
  &:only-child > .overlay { border-radius: $r; }

  // hover effect
  &:hover,
  &:hover:selected {
    background-image: linear-gradient(135deg, transparentize(white, 0.3),
                                              transparentize(white, 1) 50%);
    box-shadow: inset 0 1px transparentize(white, 0.6);
    &.color-dark { // swatches with colors with luminosity lower than 50% get the color-dark class
      background-image: linear-gradient(135deg, transparentize(white, 0.5),
                                                transparentize(white, 1) 50%);
    }
  }
  &:backdrop,
  &:backdrop:selected
  &.color-dark:backdrop,
  &.color-dark:backdrop:selected {
    background-image: none;
    box-shadow: none;
  }

  // no hover effect for the colorswatch in the color editor
  GtkColorEditor & {
    border-radius: $r; // same radius as the entry
    &:hover {
      background-image: none;
      box-shadow: none;
    }
    &:backdrop { box-shadow: none; }
  }

  // indicator and keynav outline colors
  &.color-dark {
    color: white;
    outline-color: transparentize(black, 0.7);
    &:backdrop { color: transparentize(white, 0.7); }
  }
  &.color-light {
    color: black;
    outline-color: transparentize(white, 0.5);
    &:backdrop { color: transparentize(black, 0.7); }
  }

  // border color
  overlay,
  overlay:selected {
    border: 1px solid $border_color;
    &:hover { border-color: b_color(hover); }
  }

  // make the add color button looks like, well, a button
  &#add-color-button {
    border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi
    border-width: 1px;   // translucent on the colored background, here it's not necessary so they need to be set
    @include button(normal);
    &:hover { @include button(hover); }
    &:backdrop { @include button(backdrop); }
    overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat
  }
}

GtkColorButton.button {
  padding: 5px; // Uniform padding on the GtkColorButton

  GtkColorSwatch:first-child:last-child { // :first-child:last-child for a specificity bump, it gets overridden by the
                                          // colorpicker style, otherwise
    border-radius: 0;
    box-shadow: none;
    &:disabled,
    &:backdrop { box-shadow: none; }
  }
}
