﻿
/* Pop-up General */
[popover].pop {
	width: 100%;
	border: none;
	padding: 0;
	opacity: 0;
	transform: scale(0.8);
	background-color: transparent;
	transition-property: opacity, transform, overlay, display;
	transition-duration: var(--g-trn-sp);
	transition-behavior: allow-discrete;
	position: fixed;
	
	&::backdrop {
		opacity: 0;
		backdrop-filter: blur(0.5rem);
		background: hsl(from var(--black) h s l / 0.7);
		transition: opacity var(--g-trn-sp) var(--g-trn-tf);
	}
		        
    &:popover-open { 
		opacity: 1;
		transform: scale(1);
		
		&::backdrop {
			opacity: 1;
		}
		
		@starting-style {
			opacity: 0;
			transform: scale(0.8);
							
			&::backdrop {
				opacity: 0;
			}
			
		}
	}

	[popovertargetaction="hide"] {
		margin-left: auto;
		color: var(--link-alt);
		
		svg {
			margin: 4px;
			font-size: 1.5rem;
			transition: var(--g-trn-sp) var(--g-trn-tf) 0s;
		}
		
		&:is(:hover, :focus-visible) svg {
			transform: rotate(90deg) scale(1.1,1.1);
		}
		
	}
	
	.ui-scroll {
		max-height: calc(100vh - 11rem);
		max-height: calc(100dvh - 11rem);
	}
	
}
