/** Datei: themes/lcars/assets/scss/frame/_styles.scss **/
:root {
	--gap: #{$frame-gap};
	--gap-negate: #{$frame-gap * -1};
}

.frame {
	&__{
		&wrapper {
			$frame-wrapper: & !global;
			
			display: flex;
			gap: var( --gap );
			
			input {
				max-height: var(--navbar);
				min-height: 0;
				background: transparent;
				box-shadow: none !important;
				border-style: solid;
				border-width: #{$frame-border-width};
				border-color: var( --color-border );
				color: var( --color-text );
				
				&:focus {
					border-color: var( --color-border-active );
				}
				
				&:hover {
					border-color: var( --color-border-hover );
				}
			}
		}
		
		&element {
			$frame-element: & !global;
			
			border-radius: 0;
			border-width: #{$frame-border-width};
			border-style: solid;
			
			background-color: var( --color-background );
			border-color: var( --color-border );
			color: var( --color-text );
			
			&-- {
				&fill {
					$frame-fill: & !global;
					
					flex: 1 1 auto;
				}
				
				&label,
				&button {
					$frame-label: & !global;
					
					order: 10;
					font-family: "Antonio", sans-serif;
					font-weight: 600;
					text-transform: uppercase;
					display: flex;
					gap: #{$frame-padding * 2 + $frame-border-width};
					align-items: end;
					justify-content: space-between;
					font-size: 1rem;
					text-decoration: none;
					padding: #{$frame-padding};
					text-align: right;
					
					position: relative;
					
					background: #000;
					
					z-index: 1;
					
					> * {
						z-index: 1;
					}
					
					&::after {
						content: '';
						position: absolute;
						top: #{$frame-border-width *-1};
						left: #{$frame-border-width *-1};
						right: #{$frame-border-width *-1};
						bottom: #{$frame-border-width *-1};
						z-index: -1;
						background-color: var( --color-background );
					}
					
					--size: calc( min( 100cqi, var( --height, #{$frame-inner-button} ) ) - #{($frame-padding + $frame-border-width) * 2} );
					
					min-height: 30px;
					
					.icon {
						order: 1;
						
						height: var( --size );
						font-size: var( --size );
						aspect-ratio: 1;
						
						pointer-events: none;
						
						display: inline-flex;
						align-items: center;
						justify-content: center;
						
						&::before { vertical-align: -0.01em; }
					}
					
					.label {
						order: 2;
						
						height: var( --size );
						font-size: min( var(--size), 20px );
						
						white-space: nowrap;
						display: block;
						overflow: hidden;
						text-overflow: ellipsis;
						
						line-height: 1em;
						flex: 1;
						min-inline-size: 0;
					}
					
					&:hover,
					&:focus-within{
						max-inline-size: 100vw !important;
					}
				}
				
				&label {
//					overflow: hidden;
//					text-overflow: ellipsis;
//					display: block;
				
					padding-top: #{$frame-spacing};
				}
				
				&button {
					$frame-button: & !global;
					
					cursor: pointer;
					
					&.active,
					&:active {
						--color-background: var( --color-background-active );
						--color-border: var( --color-border-active );
						--color-text: var( --color-text-active );
					}
					
					&.inactive {
						filter: brightness( 50% );
					}
					
					&[disabled] {
						pointer-events: none;
						filter: brightness(50%);
					}
					
					&:hover {
						--color-background: var( --color-background-hover );
						--color-border: var( --color-border-hover );
						--color-text: var( --color-text-hover );
					}
				}
				
				&corner {
					$frame-corner: & !global;
					
					width: calc( var( --sidebar ) - #{$frame-border-width} ) !important;
					height: var( --navbar );
					
					position: relative;
					
					&::after {
						content: '';
						display: block;
						position: absolute;
						
						background-color: var( --color-background );
						border-color: var( --color-border );
						
						border-width: #{$frame-border-width};
						border-style: solid;
						
						height: var( --navbar );
						width: #{$frame-spacing + $frame-border-width};
					}
				}
			}
		}
		
		&sidebar {
			$frame-sidebar: & !global;
			
			position: relative;
			display: flex;
			flex-direction: column;
			gap: var( --gap );
			
			grid-column: var( --side );
			grid-row: 2 / -2;
			
			--width: var( --sidebar );
			
			container-type: inline-size;
			
			> * {
				width: var( --sidebar );
			}
			
			#{$frame-wrapper} {
				flex-direction: column;
				z-index: 10;
			}
			
			&:has( > #{$frame-wrapper}:first-child ) {
				&::before {
					content: '';
					display: block;
					
					background-color: var( --color-background );
					border-color: var( --color-border );
					
					border-width: #{$frame-border-width};
					border-style: solid;
					
					width: var( --sidebar );
					height: #{$frame-spacing + $frame-border-width};
					border-top-width: 0;
				}
			}
			
			> #{$frame-wrapper} {
//				overflow-y: auto;
			}
			
			#{$frame-label} {
				flex: 0 0 auto;
				inline-size: max-content;
				min-inline-size: var(--sidebar);
				max-inline-size: var(--sidebar);
				transition: max-inline-size 200ms ease;
			}
			
			#{$frame-fill} {
				&:has( + #{$frame-fill} ) {
					margin-bottom: var( --gap-negate );
					border-bottom-width: 0;
				}
			
				&:last-child {
					margin-bottom: 0;
					border-top-width: 0;
					border-bottom-width: 0;
				}
				
				&:first-child {
					margin-top: 0;
					border-top-width: 0;
				}
			}
		}
		
		&navbar {
			$frame-navbar: & !global;
			
			position: relative;
			display: flex;
			container-type: size;
			flex-direction: row;
			gap: var( --gap );
			
			--navbar: var( --height );
			
			grid-column: 1 / -1;
			
//			#{$frame-button} {
//				max-width: var( --navbar );
//				width: var( --navbar );
//			}
			
			#{$frame-label} {
				flex: 0 0 auto;
//				inline-size: max-content;
				min-inline-size: var(--navbar);
				max-inline-size: var(--navbar);
				transition: max-inline-size 200ms ease;
			}
			
			#{$frame-wrapper} {
				flex-direction: row;
			}
			
			&-- {
				&header {
					$frame-header: & !global;
					
					--height: var( --header );
					
					grid-row: 1;
					
					#{$frame-corner} {
						border-bottom-width: 0;
						
						&::after {
							top: #{$frame-border-width * -1};
						}
					}
					
					#{$frame-wrapper} {
						align-items: start;
						gap: var( --gap );
					}
				}
				
				&footer {
					$frame-footer: & !global;
					
					--height: var( --footer );
					
					grid-row: 5;
					
					#{$frame-corner} {
						border-top-width: 0;
						
						&::after {
							bottom: #{$frame-border-width * -1};
						}
					}
				}
				
				&left,
				&right {
					width: var(--height);
				}
				
				&after,
				&before,
				&center {
					&:empty {
						display: contents;
					}
				}
			}
		}
		
		&section {
			$frame-section: & !global;
			
			--columWidth: calc( var( --sidebar ) + #{$frame-spacing} );
			
			grid-template-rows: var( --header ) #{$frame-spacing} 1fr #{$frame-spacing} var( --footer );
			grid-template-columns: var( --sidebar ) #{$frame-spacing} 1fr #{$frame-spacing} var( --sidebar );
			
			position: relative;
			flex: 1 1 auto;
			display: grid;
			margin: 0;
			overflow: hidden;
			grid-area: content;
//			gap: var( --gap );
			container: section / size;
			height: 100%;
			width: 100%;
		}
		
		&content {
			display: flex;
			overflow: auto;
			container: content / size;
			gap: calc( var( --gap ) * 2 + #{$frame-spacing} );
			margin: var( --gap );
			
			& > * {
				flex: 1 1 100%;
			}
		}
		
		&content,
		&section {
			$frame-content: & !global;
			grid-column: 1 / -1;
			grid-row: 3;
		}
		
		&corner {
			aspect-ratio: 1;
		}
		
		&title {
			margin: 0;
			height: var( --height );
			font-weight: bold;
			
			@extend  .font--headline;
			
			font-size: 100cqmin;
			line-height: 1;
			
			display: flex;
			align-items: center;
			
			text-transform: uppercase;
			flex: 0 0 auto;
			padding-inline: calc( var( --height ) / 2 - var( --gap ) );
		}
		
	}
	
	&--{
		&sidebar {
			&-left {
				$frame-is-left: & !global;
				
				> #{$frame-sidebar} {
					--side: 1;
				}
				
				> #{$frame-navbar} {
					#{$frame-corner} {
						border-right-width: 0;
						margin-right: #{$frame-spacing + $frame-border-width};
						
						&::after {
							left: 100%;
							border-left-width: 0;
						}
					}
				}
				
				> #{$frame-content} {
					grid-column: 3 / -1;
					margin-right: 0;
				}
				
			}
			
			&-right {
				$frame-is-right: & !global;
				
				> #{$frame-sidebar} {
					--side: -2;
					align-items: end;
					
					#{$frame-label} {
						flex-direction: row-reverse;
						text-align: left;
					}
				}
				
				#{$frame-section}:not( & ) {
					> #{$frame-navbar} {
						#{$frame-fill} {
							&:has( + #{$frame-fill} ) {
								margin-right: var( --gap-negate );
								border-right-width: 0;
							}
							
							+ #{$frame-fill} {
								border-left-width: 0;
							}
						}
						
						#{$frame-corner} {
							&:has( + #{$frame-fill} ) {
								margin-right: #{$frame-spacing + $frame-border-width - $frame-gap};
								
								&::after {
									border-right-width: 0;
								}
							}
							
							+ #{$frame-fill} {
								border-left-width: 0;
							}
						}
					}
				}
				
				> #{$frame-navbar} {
					flex-direction: row-reverse;
					
					#{$frame-corner} {
						border-left-width: 0;
						margin-left: #{$frame-spacing + $frame-border-width};
						
						&:has( + #{$frame-fill} ) {
							margin-left: #{$frame-spacing + $frame-border-width - $frame-gap};
							
							&::after {
								border-left-width: 0;
							}
							
							+ #{$frame-fill} {
								border-right-width: 0;
							}
						}
						
						&::after {
							right: 100%;
							border-right-width: 0;
						}
					}
					
					#{$frame-fill} {
						&:has( + #{$frame-fill} ) {
							margin-left: var( --gap-negate );
							border-left-width: 0;
						}
						
						+ #{$frame-fill} {
							border-left-width: #{$frame-border-width};
							border-right-width: 0;
						}
					}
					
					> #{$frame-navbar} {
						&-- {
							&after {
								#{$frame-label} {
									flex-direction: row;
								}
							}
							
							&before {
								#{$frame-label} {
									flex-direction: row-reverse;
									text-align: left;
								}
							}
						}
					}
				}
				
				> #{$frame-content} {
					grid-column: 1 / -3;
					margin-left: 0;
				}
			}
			
			@each $size, $value in $frame-sizes {
				&-#{$size} {
					--sidebar: var( --maxSidebar, #{$value} );
				}
			}
		}
	
		&header {
			@each $size, $value in $frame-sizes {
				&-#{$size} {
					--header: #{$value};
				}
			}
		}
		
		&footer {
			@each $size, $value in $frame-sizes {
				&-#{$size} {
					--footer: #{$value};
				}
			}
		}
	}
}

.frame__sidebar {
	.frame__wrapper{ overflow: visible; }
}

.button {
	&__ {
		&wrapper {
			&:is( #{$frame-is-right} #{$frame-navbar}--before * ) {
				align-items: end;
			}
		}
		
		&dropdown {
			&:is( #{$frame-header} * ) {
			
			}
			
			&:is( #{$frame-is-right} #{$frame-navbar}--before * ) {
				left: auto;
				right: 0;
			}
		}
		
		&dropdown,
		&wrapper.is--open {
			#{$frame-label} {
				max-inline-size: 100%;
				inline-size: 100%;
			}
		}
	}
}

input, select {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	-webkit-background-clip: text !important;
	background-clip:  text !important;
}

/** Datei: themes/lcars/assets/scss/frame/_mixins.scss **/
@mixin element--box() {
	@include theme-element(
			$height	: var( --height ),
			$border	: '0 0, 0 100%, 100% 100%, 100% 0, #{$theme-element-border} 0, #{$theme-element-border} #{$theme-element-border}, calc( 100% - #{$theme-element-border} ) #{$theme-element-border}, calc( 100% - #{$theme-element-border} ) calc( 100% - #{$theme-element-border} ), #{$theme-element-border} calc( 100% - #{$theme-element-border} ), #{$theme-element-border} 0',
	);
}

@mixin element--break-right() {
	@include theme-element(
			$height	: var( --height ),
			$width	: calc( var( --height ) / 2),
			$border : '0 100%, 100% 100%, 100% 0, 0 0, 0 #{$theme-element-border}, calc( 100% - #{$theme-element-border} ) #{$theme-element-border}, calc( 100% - #{$theme-element-border} ) calc( 100% - #{$theme-element-border} ), 0 calc( 100% - #{$theme-element-border})',
	);
	
	margin-right: $theme-element-gap;
}

@mixin element--break-left() {
	@include theme-element(
			$height	: var( --height ),
			$width	: calc( var( --height ) / 2),
			$border : '100% 100%, 0 100%, 0 0, 100% 0, 100% #{$theme-element-border}, #{$theme-element-border} #{$theme-element-border}, #{$theme-element-border} calc( 100% - #{$theme-element-border} ), 100% calc( 100% - #{$theme-element-border})',
	);
}

@mixin element--corner-left() {
	@include theme-element(
			$height	: var( --height ),
			$width	: calc( var( --height ) / 2 + #{floor($theme-line-offset)} ),
			$polygon: '100% 0, 100% 100%, calc( 100% - #{$theme-line-offset}) 100%, 0 50%, calc( 100% - #{$theme-line-offset}) 0',
			$border	: '100% 100%, calc( 100% - #{$theme-line-offset} ) 100%, 0 50%, calc( 100% - #{$theme-line-offset} ) 0, 100% 0, 100% #{$theme-element-border}, #{$theme-element-border + $theme-line-offset} 50%, 100% calc( 100% - #{$theme-element-border})',
	);
}

@mixin element--corner-right() {
	@include theme-element(
			$height	: var( --height ),
			$width	: calc( var( --height ) / 2 + #{floor($theme-line-offset)} ),
			$polygon: '0 0, 0 100%, #{$theme-line-offset} 100%, 100% 50%, #{$theme-line-offset} 0',
			$border	:'0 100%, #{$theme-line-offset} 100%, 100% 50%, #{$theme-line-offset} 0, 0 0, 0 #{$theme-element-border}, calc( 100% - #{$theme-element-border + $theme-line-offset}) 50%, 0 calc( 100% - #{$theme-element-border})',
	);
}

@mixin element--corner-top-left() {
	@include theme-element(
			$width	: calc( var( --width ) + var( --height ) / 3 ),
			$height	: calc( var( --height ) + var( --height ) / 3 ),
			$polygon: 'var( --height ) 0px, 0px var( --height ), 0px 100%, calc( 100% - var( --height, var( --height ) ) / 3 ) 100%, 100% var( --height ), 100% 0',
			$border	: '0px 100%, 0px var( --height ), var( --height ) 0px, 100% 0px, 100% #{$theme-element-border}, calc( var( --height ) + #{$theme-line-offset} ) #{$theme-element-border}, #{$theme-element-border} calc( var( --height ) + #{$theme-line-offset} ), #{$theme-element-border} 100%, calc( 100% - var( --height ) / 3 ) 100%, 100% var( --height ), 100% calc( var( --height ) - #{$theme-element-border} ), calc( 100% - #{$theme-line-offset} ) calc( var( --height ) - #{$theme-element-border} ), calc( 100% - var( --height ) / 3 - #{$theme-element-border} ) calc( 100% - #{$theme-line-offset} ), calc( 100% - var( --height ) / 3 - #{$theme-element-border} ) 100%'
	);
}

@mixin element--corner-top-right() {
	@include theme-element(
			$width	: calc( var( --width ) + var( --height ) / 3 ),
			$height	: calc( var( --height ) + var( --height ) / 3 ),
			$polygon: 'var( --height ) 0px, 0px var( --height ), 0px 100%, calc( 100% - var( --height, var( --height ) ) / 3 ) 100%, 100% var( --height ), 100% 0',
			$border	: '0px 100%, 0px var( --height ), var( --height ) 0px, 100% 0px, 100% #{$theme-element-border}, calc( var( --height ) + #{$theme-line-offset} ) #{$theme-element-border}, #{$theme-element-border} calc( var( --height ) + #{$theme-line-offset} ), #{$theme-element-border} 100%, calc( 100% - var( --height, var( --height ) ) / 3 ) 100%, 100% var( --height ), 100% calc( var( --height ) - #{$theme-element-border} ), calc( 100% - #{$theme-line-offset} ) calc( var( --height ) - #{$theme-element-border} ), calc( 100% - var( --height ) / 3 - #{$theme-element-border} ) calc( 100% - #{$theme-line-offset} ), calc( 100% - var( --height ) / 3 - #{$theme-element-border} ) 100%'
	);
	
	scale: -1 1;
}

@mixin element--corner-bottom-left() {
	@include theme-element(
			$width	: calc( var( --width ) + var( --height ) / 3 ),
			$height	: calc( var( --height ) + var( --height ) / 3 ),
			$polygon: 'var( --height ) 0px, 0px var( --height ), 0px 100%, calc( 100% - var( --height, var( --height ) ) / 3 ) 100%, 100% var( --height ), 100% 0',
			$border	: '0px 100%, 0px var( --height ), var( --height ) 0px, 100% 0px, 100% #{$theme-element-border}, calc( var( --height ) + #{$theme-line-offset} ) #{$theme-element-border}, #{$theme-element-border} calc( var( --height ) + #{$theme-line-offset} ), #{$theme-element-border} 100%, calc( 100% - var( --height, var( --height ) ) / 3 ) 100%, 100% var( --height ), 100% calc( var( --height ) - #{$theme-element-border} ), calc( 100% - #{$theme-line-offset} ) calc( var( --height ) - #{$theme-element-border} ), calc( 100% - var( --height ) / 3 - #{$theme-element-border} ) calc( 100% - #{$theme-line-offset} ), calc( 100% - var( --height ) / 3 - #{$theme-element-border} ) 100%'
	);
	
	scale: 1 -1;
}

@mixin element--corner-bottom-right() {
	@include theme-element(
			$width	: calc( var( --width ) + var( --height ) / 3 ),
			$height	: calc( var( --height ) + var( --height ) / 3 ),
			$polygon: 'var( --height ) 0px, 0px var( --height ), 0px 100%, calc( 100% - var( --height, var( --height ) ) / 3 ) 100%, 100% var( --height ), 100% 0',
			$border	: '0px 100%, 0px var( --height ), var( --height ) 0px, 100% 0px, 100% #{$theme-element-border}, calc( var( --height ) + #{$theme-line-offset} ) #{$theme-element-border}, #{$theme-element-border} calc( var( --height ) + #{$theme-line-offset} ), #{$theme-element-border} 100%, calc( 100% - var( --height, var( --height ) ) / 3 ) 100%, 100% var( --height ), 100% calc( var( --height ) - #{$theme-element-border} ), calc( 100% - #{$theme-line-offset} ) calc( var( --height ) - #{$theme-element-border} ), calc( 100% - var( --height ) / 3 - #{$theme-element-border} ) calc( 100% - #{$theme-line-offset} ), calc( 100% - var( --height ) / 3 - #{$theme-element-border} ) 100%'
	);
	
	scale: -1 -1;
}

@mixin theme-background( $polygon: 0 ) {
	position: relative;
	
	&::before {
		@include transition();
		
		content: '';
		display: block;
		z-index: -1;
		
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		
		@if $polygon != 0 {
			clip-path: polygon( #{$polygon} );
		}
	}
	
	@if $polygon != 0 {
		clip-path: polygon( #{$polygon} );
	}
	
	backdrop-filter: blur( $theme-bg-blur );
}

@mixin theme-border( $width: 0, $color: var( --brand-primary-alpha2 ) ) {
	border-color: $color;
	border-style: solid;
	border-width: $width;
}

@mixin theme-border-shape( $polygon ) {
	&::after {
		@include transition();
		
		z-index: -1;
		content: '';
		display: block;
		
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		
		@if $polygon != 0 {
			clip-path: polygon( #{$polygon} );
		}
	}
}

@mixin theme-element( $flex: 0 0 auto, $width: auto, $height: auto, $polygon: 0, $border: 0 ) {
	flex: $flex;
	width: $width;
	height: $height;
	position: relative;
	
	@include transition();
	
	@include theme-background( $polygon );
	@include theme-border-shape( $border );
}