@charset "UTF-8";

div.qr_container
{
	border-radius: 15px;
	width: 100%; max-width: 640px;
	background-color: #fff;
	overflow: hidden;
	
	& > div.footer
	{
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		padding: 15px;
		gap: 10px;
		
		& > p#qr_status
		{
			flex: 1;
			font: 400 15px/var(--system_line_height) var(--system_font);
			color: var(--system_main_color);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		& > button#camera_switcher
		{
			flex: none;
			height: 32px; width: 32px;
			background-image: url(../visual/camera_switch.png);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
		}
	}
	
}

div.qr_scanner 
{
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	background: #111;
	overflow: hidden;
	
	& > video
	{
		position: relative;
		width: 100%; height: 100%;
		object-fit: cover;
		z-index: 1;
	}
	
	& > div.qr_overlay
	{
		display: none;
	
		position: absolute;
		inset: 0px;
		background: rgba(0,0,0,0.65);
		z-index: 2;
		pointer-events: none;
		
		-webkit-mask:
	      linear-gradient(#000 0 0) center / 250px 250px no-repeat,
	      linear-gradient(#000 0 0);
	    -webkit-mask-composite: xor;
	
	    mask:
	      linear-gradient(#000 0 0) center / 250px 250px no-repeat,
	      linear-gradient(#000 0 0);
	    mask-composite: exclude;
	    
	    & > div.qr_frame
	    {
	    	position: absolute;
	    	top: calc(50% - 135px); left: calc(50% - 135px);
	    	height: 270px; width: 270px;
	    	
	    	& > span.corner { display: inline-block; position: absolute; height: 10%; width: 10%; }
	    	& > span.corner.tl { top: 0px; left: 0px; border-left: 3px solid red; border-top: 3px solid red; }
	    	& > span.corner.tr { top: 0px; right: 0px; border-right: 3px solid red; border-top: 3px solid red; }
	    	& > span.corner.bl { bottom: 0px; left: 0px; border-left: 3px solid red; border-bottom: 3px solid red; }
	    	& > span.corner.br { bottom: 0px; right: 0px; border-right: 3px solid red; border-bottom: 3px solid red; }
	    	
	    }
	}
	&.playing > div.qr_overlay { display: block }
}