/*
 * Copyright (c) 2022 Ford Motor Company
 * All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@use '../../../../../../Styles/main';

.feedback-stars {
	margin: 0 0 1.5rem;

	font-weight: 400;
	font-size: 2rem;
	text-align: center;

	border: 0;

	@include main.breakpoint-medium {
		font-size: 3.3rem;
	}

	.hidden {
		display: none;
	}

	.feedback-star-input.with-font {
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;

		border: 0;

		clip: rect(0 0 0 0);

		position: absolute;

		+ label::before {
			display: inline-block;
			width: 3rem;

			color: main.$blue;
			font-family: FontAwesome, serif;

			cursor: pointer;

			content: '\f006';

			@include main.breakpoint-medium {
				width: 4rem;
			}
		}

		&.highlight + label::before,
		&:checked + label::before {
			color: main.$yellow;
			content: '\f005';
		}

		&:focus + label::before {
			color: main.$dark-yellow;
			font-weight: bold;
		}
	}
}
