@charset "utf-8";

.Starry {
	display: inline-block;
	position: relative;

	&:hover {
		> .Starry-active:not(.Starry-static) {
			display: none;
		}
	}

	> .Starry-blank,
	> .Starry-active,
	> .Starry-hover {
		display: flex;
		/* flex-direction: row-reverse;
		justify-content: flex-end; */
		overflow: hidden;
		white-space: nowrap;
	}

	> .Starry-active,
	> .Starry-hover {
		position: absolute;
		top: 0px;
		left: 0px;
	}

	> .Starry-active {
		width: 0%;
	}

	> .Starry-hover {
		flex-direction: row-reverse;
		justify-content: flex-end;

		> .Starry-star {
			opacity: 0;
			cursor: pointer;
		}

		> .Starry-star:hover,
		> .Starry-star:hover ~ .Starry-star {
			opacity: 1;
		}
	}

	.Starry-star {
		display: inline;
		margin: 0 !important;
		padding: 2px;
	}
}