/* Cookie banner */

#cc-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    padding: var(--nav-bar-padding) calc(var(--section-wrapper-horizontal-padding) - .25rem);
    
    @media (width >= 1025px) {
        padding: var(--nav-bar-padding) calc(var(--section-wrapper-horizontal-padding) + 1rem);
    }
    
    .cc-i-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--heading-wrapper-gap);
        
        
        width: 100%;
        max-width: calc(var(--section-max-width) - 2rem);
        padding: var(--padding-box-sm);
        border-radius: var(--radius-xs);
        background-color: var(--background-dark);
        
        @media (width >= 768px) {
            flex-direction: row;
            justify-content: space-between;
            
            height: var(--nav-bar-inner-height);
            padding: 0 1.5rem;
        }
        
        .cc-text {
            display: block;
            font-size: var(--font-size-md);
            text-align: center;
            line-height: var(--line-height-sm);
            
            @media (width >= 768px) {
                text-align: left;
            }
        }
        
        .cc-buttons {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--spacing-mini);
            
            width: 100%;
            
            @media (width >= 768px) {
                flex-direction: row-reverse;
                justify-content: end;
                width: fit-content;
            }
            
            button {
                @media (width < 768px){
                    width: 100%;
                }
                
            }
        }
    }
}

/* GPC toast */

.cc-toast {
	position: fixed;
	right: var(--section-wrapper-hp);
	bottom: var(--section-wrapper-hp);
	z-index: 99999;
	
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: start;
	gap: var(--spacing-sm);
	flex-wrap: nowrap;
	
	width: fit-content;
	max-width: calc(100vw - (var(--section-wrapper-hp) * 2));

	padding: var(--padding-box-xs);
	border-radius: var(--radius-mini);
	box-shadow: var(--nav-shadow);
	
	background-color: var(--background);
	
	font-size: var(--font-size-sm);
	line-height: var(--line-height-xs);
	color: var(--color-strong);
	
	button.cc-toast-close {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: none;
		border: 0;
		color: var(--brand-color);
		cursor: pointer;
		padding: 0;
		height: calc(var(--font-size-sm) * var(--line-height-sm));

		&:hover {
			color: var(--brand-color);
		}

		svg.cc-toast-icon {
			aspect-ratio: 1 / 1;
			height: calc(var(--font-size-sm) - 1px);
			width: auto;
		}
	}
}