@charset "utf-8";

/*item review page*/
#reviews_content{flex:auto;display:flex;flex-direction:column;
	&>.inner{flex:auto;width:min(100%,var(--MaxContentWidth));margin-inline:auto;padding:var(--spacing);box-sizing:border-box;display:grid;grid:"review_title review_title" auto "review_stat review_comment" 1fr/clamp(30em,33%,35em) 1fr;gap:var(--spacing);align-items:start;
		&>h1{grid-area:review_title;font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW);
			& b{font-weight:var(--SiteFW-EB);}
		}
		#review_stat{grid-area:review_stat;}
		#review_comment{grid-area:review_comment;}
	}
	#review_stat{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L1);position:sticky;inset-block-start:calc(var(--main-nav-height) * 1px + var(--spacing));z-index:1;
		.ItemLink{width:min(30em,100%);margin-inline:auto;--W:4.5em;}
		.overview{display:flex;flex-wrap:wrap;justify-content:space-around;gap:1em;padding-block-start:var(--spacing);box-shadow:var(--body-text-color-a5) 0 1px 0 inset;width:min(30em,100%);margin-inline:auto;
			&>div{text-align:center;display:flex;flex-direction:column-reverse;}
			& b{display:block;font-size:var(--SiteFS-XXL);font-weight:var(--SiteFW-EB);}
			& span{color:var(--body-text-color-a50);font-size:var(--SiteFS-S);}
		}
		.statistics{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5em var(--spacing);width:min(30em,100%);margin-inline:auto;
			.T{}
			.B{padding:.25em;border-radius:1em;background-color:var(--SiteTHM-A10);
				&::before{content:'';display:block;width:.333334em;height:.333334em;border-radius:1em;background-color:var(--SiteTHM-A25);background-image:linear-gradient(calc(var(--angle-reverse,1) * 90deg),var(--SiteTHM-A25),var(--SiteTHM));background-size:calc(var(--TotalReviews) / var(--Review) * 100%);background-position-x:var(--inline-start,left);animation:bar ease-out 3s 300ms forwards;}
			}
			.C{font-weight:var(--SiteFW-EB);text-align:end;}
		}
	}	
	#review_comment{display:flex;flex-direction:column;gap:var(--spacing);padding:var(--spacing);border-radius:1em;background-color:var(--background-color-L2);overflow:hidden;align-self:stretch;
		.filter{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing);
			.rating{margin-inline-end:auto;
				.tab_wrp{display:flex;padding-inline:1px;padding-block-start:1px;box-shadow:var(--body-text-color-a10) 0 -1px 0 inset;overflow:hidden;background-color:var(--background-color-L2);
					.tab{display:flex;align-items:center;gap:1px;justify-content:center;text-align:center;min-width:var(--CPT-US);height:calc(var(--CPT-US) - 1px);padding-inline:var(--spacing);border-start-start-radius:var(--CPT-BDR);border-start-end-radius:var(--CPT-BDR);color:inherit;cursor:pointer;overflow:hidden;position:relative;transition:box-shadow 300ms;
						&::before{content:'';display:block;position:absolute;inset-inline:var(--spacing);inset-block-end:0;z-index:1;height:.25em;background-color:var(--SiteTHM);opacity:0;transition:opacity 300ms;}
						&.on{box-shadow:var(--body-text-color-a10) 0 0 0 1px;background-color:inherit;
							&::before{opacity:1;}
						}
						&>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
					}
				}
			}
			.cpt-checkbox{--font-weight:var(--CPT-FW);}
		}
		.review_list{display:grid;grid-template-columns:repeat(auto-fill,minmax(26em,1fr));gap:1em;
			.review{display:grid;grid:"avatar name name" auto "avatar rate time" auto "func comment comment" 1fr/auto auto 1fr;grid-template-rows:auto auto 1fr;align-items:center;column-gap:1em;padding:1.5em;border-radius:.5em;box-shadow:var(--body-text-color-a5) 0 0 0 1px inset;background-color:var(--background-color-L3);
				&:not(:hover){--color:var(--body-text-color-a50);--icon:'outlined_flag';
					.report{visibility:hidden;opacity:0;}
				}
				.avatar{grid-area:avatar;width:3em;height:3em;border-radius:100%;overflow:hidden;background:var(--body-text-color-a5);box-shadow:var(--body-text-color-a5) 0 0 0 1px;
					&>img{display:block;width:100%;height:100%;object-fit:cover;}
				}
				.name{grid-area:name;font-weight:var(--SiteFW-B);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
				.rate{grid-area:rate;--RateStarSize:1em;}
				.time{grid-area:time;font-size:var(--SiteFS-S);color:var(--body-text-color-a50);line-height:1;}
				.comment{grid-area:comment;margin-block-start:1em;align-self:start;max-height:6em;overflow:hidden;overflow-y:auto;text-overflow:ellipsis;
					&.nocomment{font-style:italic;color:var(--body-text-color-a50);}
				}
				.func{grid-area:func;align-self:start;}
				.report{--CPT-US:var(--icon-size);--color:var(--SiteTHM);display:block;width:var(--CPT-US);height:var(--CPT-US);margin-inline:auto;margin-block-start:1em;transition:color 300ms,visibility 300ms,opacity 300ms;}
			}
		}
		.load{margin-inline:auto;}
		.load_more{display:block;margin-inline:auto;--icon-order:1;
			&.hide{display:none;}
		}
	}
	@media only screen and (max-width:800px){
		&>.inner{grid:"review_title" auto "review_stat" auto "review_comment" 1fr;width:min(40em,100%);}
		#review_stat{position:unset;}
		#review_comment .filter{flex-direction:column;align-items:unset;gap:1em;
			.rating .tab_wrp{flex-wrap:wrap;gap:.75em;box-shadow:unset;
				.tab{border-radius:var(--CPT-BDR);box-shadow:var(--body-text-color-a10) 0 0 0 1px inset;
					&.on{background-color:var(--SiteTHM-A10);box-shadow:unset;}
				}
			}
		}
	}
	@media only screen and (max-width:480px){
		#review_stat,#review_comment{margin-inline:calc(var(--spacing) * -1);}
	}
}
@keyframes bar{100%{width:clamp(.333334em,calc(var(--Review) / var(--TotalReviews) * 100%),100%);}}