/* Patterns - Numbers - Rating */
////
/// @group Patterns-Rating
/// Patterns - Numbers - Rating

///
.rating {
	position: relative;
	display: inline-flex;
	flex-wrap: wrap;
	font-size: var(--rating-size);
	pointer-events: none;

	// Service Studio Preview
	& {
		-servicestudio-display: inline-flex;
	}

	&.rating-small {
		--rating-size: 8px;

		.rating-item {
			padding-right: calc(var(--rating-size) + var(--space-xs));
		}
	}

	&.rating-medium {
		--rating-size: 24px;
	}

	&.is-edit {
		// Ensure edit mode will only be available when fieldset is not disabled
		&:not(:has(fieldset[disabled='true'])) {
			pointer-events: initial;

			.rating-item {
				cursor: pointer;
				pointer-events: auto;
			}
		}
	}

	fieldset {
		border: none;
		display: contents;
		margin: 0;
		padding: 0;

		&[disabled='true'] {
			.rating-item {
				&-filled,
				&-half {
					color: var(--color-neutral-6);

					.icon {
						color: var(--color-neutral-6);
					}
				}

				&-empty {
					color: var(--color-neutral-6);

					.icon {
						color: var(--color-neutral-4);
					}
				}
			}
		}
	}

	&-item {
		display: inline-block;
		height: var(--rating-size);
		// Padding is used to avoid flicks on hover due to rating-items gap
		padding-right: calc(var(--rating-size) + var(--space-s));
		position: relative;
		width: var(--rating-size);

		&-filled,
		&-half,
		&-empty {
			left: 0;
			line-height: 1;
			position: absolute;
			top: 0;
			transition: opacity linear 150ms;

			// Service Studio Preview
			& {
				-servicestudio-margin-right: var(--space-s);
				-servicestudio-min-height: 24px;
				-servicestudio-min-width: 24px;
				-servicestudio-opacity: 1 !important;
				-servicestudio-position: relative;
			}
		}

		&-filled {
			opacity: 1;
			z-index: var(--layer-local-tier-1);
		}

		&-empty,
		&-half {
			opacity: 0;
			z-index: var(--layer-global-screen);
		}

		&:last-of-type {
			padding-right: 0;
		}

		img {
			max-width: none;
		}
	}

	input {
		&:checked + .rating-item .rating-item-empty,
		&:checked ~ .rating-item .rating-item-filled {
			opacity: 0;
		}
	}

	&.is-half {
		input:checked ~ .rating-item .rating-item-half {
			opacity: 0;
		}
	}

	/* Selected Styles*/
	&:hover input + .rating-item .rating-item-filled {
		opacity: 1;
	}

	input {
		&:first-of-type {
			+ .rating-item {
				background: transparent;
				box-shadow: 0 0 0 3px var(--color-focus-outer);
				height: 100%;
				left: 0;
				opacity: 0;
				pointer-events: none;
				position: absolute;
				top: 0;
				width: 100%;
			}
			&:focus:checked + .rating-item {
				opacity: 1;
			}
		}

		// These need to be separated, to keep exact CSS specificty, for the hover/ checked styles to work as intended
		/* Checked styles*/
		&:checked + .rating-item .rating-item-filled,
		&:checked + .rating-item .rating-item-half,
		&:checked ~ .rating-item .rating-item-empty,
		&:hover ~ .rating-item .rating-item-empty,
		&:focus ~ .rating-item .rating-item-empty,
		&:focus + .rating-item .rating-item-filled {
			opacity: 1;
		}

		//&:focus + .rating-item .rating-item-empty,
		&:hover ~ .rating-item .rating-item-filled,
		&:hover ~ .rating-item .rating-item-half {
			opacity: 0;
		}

		&:hover + .rating-item .rating-item-filled {
			opacity: 1;
		}
	}

	&.is-half {
		.rating-item-half {
			z-index: var(--layer-local-tier-1);
		}

		input:checked + .rating-item {
			.rating-item-half {
				opacity: 1;
			}

			.rating-item-filled {
				opacity: 0;
			}
		}

		input:hover ~ .rating-item {
			.rating-item-filled,
			.rating-item-half {
				opacity: 0;
			}
		}

		&:hover input:checked + .rating-item .rating-item-filled,
		input:hover + .rating-item .rating-item-filled {
			opacity: 1;
		}

		&:hover input:hover ~ .rating-item .rating-item-filled {
			opacity: 0;
		}

		&:hover input:hover + .rating-item .rating-item-filled {
			opacity: 1;
		}
	}

	.icon-states {
		// Service Studio Preview
		& {
			-servicestudio-display: flex;
		}

		span {
			// Service Studio Preview
			& {
				-servicestudio-display: flex;
			}
		}
	}

	--rating-size: 16px;
}

///
.form {
	.rating {
		span.wcag-hide-text {
			position: absolute;
		}
	}
}

// Responsive -------------------------------------------------------------------------
///
.ios {
	.rating {
		.rating-item {
			//Fix for preventing FastClick issues on iOS
			// Check here for details: https://github.com/ftlabs/fastclick/issues/60 */
			& > * {
				display: block;
				pointer-events: none;
			}
		}
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	.rating {
		.rating-item {
			padding-left: calc(var(--rating-size) + var(--space-s));
			padding-right: 0;
			transform: scaleX(-1);
		}
	}
}

// Accessibility -----------------------------------------------------------------
///
.has-accessible-features {
	.rating {
		&.is-half input:focus + .rating-item .rating-item-filled,
		&:not(.is-half) input:focus + .rating-item .rating-item-half,
		input:checked + .rating-item .rating-item-empty {
			&,
			* {
				box-shadow: none;
			}
		}

		&.is-half input:focus + .rating-item .rating-item-half,
		&:not(.is-half) input:focus + .rating-item .rating-item-filled {
			&,
			* {
				box-shadow: 0 0 0 3px var(--color-focus-outer);
			}
		}
	}

	fieldset[disabled='true'] {
		.rating-item {
			&-filled,
			&-half {
				color: var(--color-neutral-7);

				.icon {
					color: var(--color-neutral-7);
				}
			}

			&-empty {
				color: var(--color-neutral-7);

				.icon {
					color: var(--color-neutral-5);
				}
			}
		}
	}
}

// Fix issue on chromium based browsers, related with css snap and the complex combination of HTML and CSS properties used by the Rating
.chrome,
.edge {
	.osui-tabs {
		.rating {
			.wcag-hide-text {
				margin: unset;
			}
		}
	}
}

// OS HighContrast Enabled -------------------------------------------------------
///
.os-high-contrast {
	.has-accessible-features {
		.rating {
			&.is-half input:focus + .rating-item .rating-item-half,
			&:not(.is-half) input:focus + .rating-item .rating-item-filled {
				&,
				* {
					@include a11y-high-contrast-outline;
				}
			}
		}
	}
}