.ratings-like,
.ratings-thumbs {
	$animation-duration: 500ms;

	button {
		&:hover:not(:disabled) .lexicon-icon {
			transform: scale(1.3);
		}

		.on {
			display: flex;
			opacity: 0;
			position: absolute;
			visibility: hidden;

			.lexicon-icon {
				color: transparent;
			}
		}

		.off {
			display: flex;
			opacity: 1;
			visibility: visible;
		}

		&[aria-pressed='true'] {
			.on {
				opacity: 1;
				visibility: visible;
			}

			.off {
				opacity: 0;
				visibility: hidden;
			}
		}

		&.btn-animated {
			&[aria-pressed='true'] {
				.on {
					animation-duration: $animation-duration;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in-out;
				}
			}
		}
	}

	.lexicon-icon {
		transition: transform 300ms ease-in-out;
	}
}
