@charset "UTF-8";

/*************************
 * Check and Radio items *
 *************************/

checkbutton.text-button,
radiobutton.text-button {
	// this is for a nice focus on check and radios text
	padding: 2px 0;
	outline-offset: 0;

	label:not(:only-child) {
		&:first-child {
			margin-left: 4px;
		}
		&:last-child {
			margin-right: 4px;
		}
	}
}

check,
radio {
	transition: 0.1s;
	margin: 0 4px;

	&:only-child {
		margin: 0;
	}

	min-height: 14px;
	min-width: 14px;
	//border: none;
	animation-timing-function: $ease-out-quad;
	background-color: gtk("@theme_button_background_normal");
	border: 1px solid gtkalpha(
		gtk("@theme_button_foreground_normal"),
		0.33
	);

	-gtk-icon-shadow: none;
	-gtk-icon-palette: fg gtk("@theme_fg_color");

	&:hover {
		border: 1px solid gtk("@theme_button_decoration_hover");
	}
	&:disabled {
		background-color: gtk("@insensitive_base_color");

		border-color: gtkalpha(
			gtk("@insensitive_base_fg_color"),
			0.33
		);
	}

	&:active {
		background: shade(gtk("@theme_base_color"), 0.9)
	}

	&:focus {
		border-color: gtk("@theme_button_decoration_focus");
	}

	&:indeterminate,
	&:checked {
		border-color: gtk("@theme_button_decoration_hover");
		background-color: gtkalpha(
			gtk("@theme_button_decoration_hover"),
			0.33
		);

		&:backdrop {
			background-color: gtkalpha(
				gtk("@theme_unfocused_selected_bg_color"),
				0.33
			);

			border-color: gtk("@theme_unfocused_selected_bg_color");
		}

		&:disabled {
			background-color: gtkalpha(
				gtk("@insensitive_bg_color"),
				0.33
			);

			border-color: gtk("@insensitive_bg_color");
			color: gtk("@insensitive_fg_color");
			-gtk-icon-effect: none;
		}
	}

	&:indeterminate {
		-gtk-icon-source: -gtk-recolor(url("../assets/dash-symbolic.svg"));
	}

	menu menuitem & {
		margin: 0; // this is a workaround for a menu check/radio size allocation issue
		min-height: 14px;
		min-width: 14px;
		background-color: transparent;
		box-shadow: none;
		-gtk-icon-shadow: none;
		animation: none;
	}
}

check{
	border-radius: $r;
	&:checked {
		-gtk-icon-source: -gtk-recolor(url("../assets/checkmark-symbolic.svg"));
	}
}
radio {
   border-radius: 50%;
   &:checked {
        -gtk-icon-source: -gtk-recolor(url("../assets/bullet-symbolic.svg"));
   }
}

radio:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: scale(0); }

check:not(:indeterminate):not(:checked):active:not(:backdrop) { -gtk-icon-transform: translate(-4px, 3px) scale(0) }

radio,
check {
  &:active { -gtk-icon-transform: scale(0, 1); }

  &:checked:not(:backdrop), &:indeterminate:not(:backdrop) {
    -gtk-icon-transform: unset;
  }
}
