/**
 * Styles for GravityView frontend Approve/Unapprove toggles
 * @since 1.19
 */

.gv-approval-toggle {

	/**
	 * Change the icon size
	 */
	$font-size: 24px;
	$background: #f0f0f0;

	// Start with green approval check mark
	color: #008000 !important;

	box-shadow: none !important;
	text-decoration: none !important;
	border-bottom: none !important;

	/**
	 * The label for the icons
	 */
	span.screen-reader-text {
		position: absolute;
		margin: -1px;
		padding: 0;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		border: 0;
	}

	&.gv-approval-disapproved {

		// Switch to red X
		color: #981225 !important;

		&::before {
			content: "\f158";
		}
	}

	// Switch to yellow circle
	&.gv-approval-unapproved {
		color: #ecaa00 !important;

		&::before {
			content: "\f159";
		}
	}

	&.gv-approval-loading {
		&::before {
			background: $background !important;
		}

		opacity: .7;
		cursor: wait !important;
	}

	&::before {
		font-family: "dashicons";
		left: 0;
		top: 0;
		cursor: pointer;
		content: "\f147";
		width: $font-size;
		height: $font-size;
		border: 1px solid darken($background, 7%);
		padding: 4px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		display: inline;
		font-size: $font-size;
		-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
		-moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
		box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
	}

	&.selected:link::before,
	&.selected:visited::before {
		background: $background;
	}

	&.selected.popover:link::before {
		cursor: not-allowed;
	}

	&:hover::before {
		background: darken($background, 2.5%);
	}

	&:active::before {
		background: darken($background, 7%);
	}
}