star-grader {
	display: grid;
	grid-template-columns: 1fr min-content;
	grid-template-rows: 1fr 1fr;
	row-gap: var(--u-2xs);
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	overflow: hidden;
}

star-grader > input {
	grid-column: 1/1;
	grid-row: 1/1;
	flex-grow: 1;
	height: 100%;
	display: block;
	padding: 0 var(--u-2xs);
	border: solid 1px #ddd;
	border-top-left-radius: var(--u-4xs);
	border-bottom-left-radius: var(--u-4xs);
}

star-grader > div {
	display: none;
}

star-grader[editable="false"] { 
	height: var(--u-sm);
}

star-grader[editable="false"] > input {
	display: none;
}

star-grader[editable="false"] > div {
	grid-column: 1/1;
	grid-row: 1/1;
	flex-grow: 1;
	height: 100%;
	display: block;
	padding-top: 0.7rem;
	padding-bottom: var(--u-4xs);
	padding-left: var(--u-2xs);
	padding-right: var(--u-2xs);
	border: solid 1px #ddd;
	border-top-left-radius: var(--u-4xs);
	border-bottom-left-radius: var(--u-4xs);
	overflow-y: scroll;
	font-family: "Sesame Sans", system-ui;
}

star-grader > main {
	grid-column: 2/2;
	grid-row: 1/1;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	padding: var(--u-4xs);
	border: solid 1px #ddd;
	border-left: none;
	border-top-right-radius: var(--u-4xs);
	border-bottom-right-radius: var(--u-4xs);
	color: gold;
	position: relative;
}

star-grader[editable="false"] > main {
	display: none;
}

star-grader > main > i {
	font-size: 3rem;
	color: gold !important;
	background-color: transparent !important;
	width: unset !important;
}

star-grader[editable="false"] > main > i {
	pointer-events: none;
}

star-grader > main > i.icon-fill {
	display: none;
}

star-grader[data-star="1"] > main > i:nth-of-type(1),
star-grader[data-star="2"] > main > i:nth-of-type(1),
star-grader[data-star="2"] > main > i:nth-of-type(3),
star-grader[data-star="3"] > main > i:nth-of-type(1),
star-grader[data-star="3"] > main > i:nth-of-type(3),
star-grader[data-star="3"] > main > i:nth-of-type(5) {
	display: none;
}

star-grader[data-star="1"] > main > i:nth-of-type(2),
star-grader[data-star="2"] > main > i:nth-of-type(2),
star-grader[data-star="2"] > main > i:nth-of-type(4),
star-grader[data-star="3"] > main > i:nth-of-type(2),
star-grader[data-star="3"] > main > i:nth-of-type(4),
star-grader[data-star="3"] > main > i:nth-of-type(6) {
	display: inline-flex;
}

star-grader > h2 {
	border-radius: var(--u);
	height: var(--u-sm);
    font-size: 1.25rem;
	aspect-ratio: 2.9;
	justify-self: end;
	padding: 0 var(--u-2xs);
	color: white;
	cursor: pointer;
	transition: transform 0.1s;
	display: flex;
	justify-content: center;
	align-items: center;
}

star-grader > h2:active {
	transform: scale(0.97);
}

star-grader[editable="false"] > h2 {
	display: none;
}

star-grader > h2.submit {
	grid-column: 2/2;
	grid-row: 2/2;
	background-color: var(--color-yellow);
}

star-grader > h2.submit > output-i18n.submit {
	display: block;
}

star-grader.edit > h2.submit > output-i18n.submit {
	display: none;
}

star-grader > h2.submit > output-i18n.edit {
	display: none;
}

star-grader > h2.submit > output-i18n.resubmit {
	display: none;
}

star-grader.edit > h2.submit.resubmit > output-i18n.resubmit {
	display: block;
}

star-grader.edit > h2.submit > output-i18n.edit {
	display: block;
}

star-grader > h2.submit.resubmit > output-i18n.edit {
	display: none;
}

star-grader > h2.cancel {
	grid-column: 1/2;
	grid-row: 2/2;
	background-color: var(--color-gray);
}

star-grader > h2.cancel {
	display: none;
}

star-grader.edit > h2.cancel.on {
	display: flex;
}