/*****************
 * Color Chooser *
 *****************/
GtkColorSwatch {
  // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one

  $_colorswatch_radius: 5px;
  $_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3),
                                                        inset 0 3px 2px -2px transparentize(black, 0.5));

  &.top {
    border-top-left-radius: $_colorswatch_radius + 0.5px;
    border-top-right-radius: $_colorswatch_radius + 0.5px;

    overlay {
      border-top-left-radius: $_colorswatch_radius;
      border-top-right-radius: $_colorswatch_radius;
    }
  }

  &.bottom {
    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
    border-bottom-right-radius: $_colorswatch_radius + 0.5px;

    overlay {
      border-bottom-left-radius: $_colorswatch_radius;
      border-bottom-right-radius: $_colorswatch_radius;
    }
  }

  &.left,
  &:first-child:not(.top) {
    border-top-left-radius: $_colorswatch_radius + 0.5px;
    border-bottom-left-radius: $_colorswatch_radius + 0.5px;

    overlay {
      border-top-left-radius: $_colorswatch_radius;
      border-bottom-left-radius: $_colorswatch_radius;
    }
  }

  &.right,
  &:last-child:not(.bottom) {
    border-top-right-radius: $_colorswatch_radius + 0.5px;
    border-bottom-right-radius: $_colorswatch_radius + 0.5px;

    overlay {
      border-top-right-radius: $_colorswatch_radius;
      border-bottom-right-radius: $_colorswatch_radius;
    }
  }

  &.dark overlay {
    color: $selected_fg_color;

    &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }

    &:backdrop { color: $backdrop_selected_fg_color; }
  }

  &.light overlay {
    color: $text_color;

    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }

    &:backdrop { color: $backdrop_text_color; }
  }

  overlay {
    box-shadow: $_colorswatch_overlay_shadow;
    border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);

    &:hover { box-shadow: inset 0 1px transparentize(white, 0.7); }

    &:backdrop, &:backdrop:hover {
      border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
      box-shadow: none;
    }
  }

  &#add-color-button {
    border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;

    &:only-child { border-radius: $_colorswatch_radius; }

    overlay {
      @include button(normal);

      &:hover { @include button(hover); }

      &:backdrop { @include button(backdrop); }
    }
  }

  &:insensitive {
    opacity: 0.5;

    overlay {
      border-color: transparentize(black, 0.4);
      box-shadow: none;
    }
  }

  row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }

  &#editor-color-sample {
    border-radius: 4px;

    overlay { border-radius: 4.5px; }
  }
}

// colorscale popup
colorchooser .popover.osd { border-radius: 5px; }