@charset "UTF-8";

/*****************
 * 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: gtk("@theme_selected_fg_color");
		}
	}

	&: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 gtk("@borders");
		&:hover {
			border-color: gtk("@theme_button_decoration_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 neobutton(normal);
		overlay {
			@include neobutton(toolbutton);
		} // 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;
		}
	}
}
