// Colors.
$amp-icon-accent-green-light: #d3e5e5;
$amp-icon-accent-red: #dc3232;
$amp-icon-accent-red-light: #f7ded4;
$amp-icon-medium-blue: #00a0d2;
$amp-icon-accent-orange: #ffc733;

// Base for rounded icon element.
%amp-icon-rounded-base {

	&::before {
		border-radius: 5px;
		content: "";
		display: inline-block;
		height: 20px;
		width: 20px;
	}
}

.amp-icon {

	body & {
		/* stylelint-disable font-family-no-missing-generic-family-keyword */
		font: normal 20px/1 dashicons;
	}

	// Invalid.
	&.amp-invalid {

		@extend %amp-icon-rounded-base;

		&::before {
			background: $amp-icon-accent-red-light url("../images/amp-alert.svg") no-repeat center;
			background-size: 18px auto;
		}

		// Alt icon in Admin Bar.
		&.ab-icon::before {
			background: none;
			color: $amp-icon-accent-red !important;
			content: "\f153";
		}
	}

	// Valid.
	&.amp-valid {

		@extend %amp-icon-rounded-base;

		&::before {
			background: $amp-icon-accent-green-light url("../images/amp-valid.svg") no-repeat center;
			background-size: 16px auto;
		}

		// Alt icon in Admin Bar.
		&.ab-icon::before {
			content: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="0" fill="none" width="20" height="20"/><g><path fill="%2346b450" d="M10 2c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm-.615 12.66h-1.34l-3.24-4.54 1.34-1.25 2.57 2.4 5.14-5.93 1.34.94-5.81 8.38z"/></g></svg>');
			background: none;
		}
	}

	// Removed.
	&.amp-removed::before {

		@extend %amp-icon-rounded-base;

		background: $amp-icon-accent-green-light url("../images/amp-delete.svg") no-repeat center;
		background-size: 20px auto;
	}

	// Warning.
	&.amp-warning::before {
		color: $amp-icon-accent-orange !important;
		content: "\f534";
	}

	// AMP logo.
	&.amp-logo::before {
		content: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd"><circle fill="%23FFF" cx="15" cy="15" r="10"/><path fill="%23005AF0" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></g></svg>');
		display: inline-block;
		height: 20px;
		width: 20px;
	}

	// Link.
	&.amp-link {

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

		&:not(.ab-icon)::before {
			color: $amp-icon-medium-blue !important;
		}
	}
}

// Admin bar icons fine-tuning.
#wpadminbar {

	span.amp-icon {
		top: 2px;
	}

	.ab-sub-wrapper span.amp-icon {
		position: absolute !important;
		margin-left: 2px;
		padding: initial !important;
	}
}
