/** Datei: themes/lcars/assets.OLD/scss/_variables.scss **/
$frame-gap				: 7px !default;
$frame-padding			: 5px !default;
$frame-padding-small	: 3px !default;
$frame-spacing			: 20px !default;

$frame-border-radius	: 0px !default;
$frame-border-width		: 1px !default;
$frame-inner-button		: 30px - $frame-border-width * 2;
$frame-sizes			: (
	'xs'		: 21px,
	'sm'		: 30px,
	'md'		: 45px,
	'lg'		: 120px,
	'xl'		: 180px,
) !default;


$icon-font-family		: bootstrap-icons;


$theme-breakpoints 	: (
		'400px'	: (
				'width'		: (
						'xs'		: 10px,
						'sm'		: 15px,
						'md'		: 30px,
						'lg'		: 60px,
						'xl'		: 120px,
				),
				'height'	: (
						'sm'		: 15px,
						'md'		: 21px,
						'lg'		: 30px,
				)
		),
);

$theme-bg-blur			: 5px !default;
$transition				: all 200ms ease-in-out;
$transition-slow		: all 2000ms ease-in-out;

:root {
	--grid-quantity: 60px;
	--grid-amount: 75px;
	--grid-label: 100px;
	--grid-icon: 30px;
}

$theme-colors			: map-merge( $theme-colors, (
	background		: get_color( black ),
	color			: get_color( white ),
	content			: get_color( black ),
));


// Layoutvariablen für REST
//$sidebar-width	: 250px;
//$header-height	: 60px;
//$rest-gap-tiny			: 5px;
//$rest-gap-small			: 10px;
//$rest-gap-default		: 15px;
//$rest-gap-wide			: 20px;
//$rest-border-radius		: frame-border-radius;
//$rest-frame-font-family	: Antonio, sans-serif;

$theme-font-family						: sans-serif;
$theme-icon-font-family					: bootstrap-icons;
$theme-colorize-alpha					: .4;
$theme-colorize-bg-alpha				: .0;
$theme-colorize-border-alpha			: .1;
$theme-colorize-active-alpha			: .1;
$theme-colorize-hover-alpha				: .2;

$table-font-family								: $theme-font-family;
$table-border-spacing							: $frame-gap;

$table-header-font-family						: $theme-icon-font-family;
$table-header-border-width						: $frame-border-width;
$table-header-bg-color							: get_colorize_bg( secondary );
$table-header-bg-color-hover					: get_colorize_bg( secondary, $theme-colorize-hover-alpha + $theme-colorize-active-alpha );
$table-header-bg-color-active					: get_colorize_bg( secondary, $theme-colorize-hover-alpha ) !default;
$table-header-bg-color-active-hover				: get_colorize_bg( secondary, $theme-colorize-hover-alpha + $theme-colorize-active-alpha ) !default;

$table-header-border-color						: get_colorize_border( secondary );
$table-header-border-color-hover				: get_colorize_border( secondary, $theme-colorize-hover-alpha + $theme-colorize-active-alpha );
$table-header-border-color-active				: get_colorize_border( secondary, $theme-colorize-hover-alpha ) !default;
$table-header-border-color-active-hover			: get_colorize_border( secondary, $theme-colorize-hover-alpha + $theme-colorize-active-alpha ) !default;

$table-cell-border-width						: 0;
$table-row-bg-color								: get_color_tone( content, -200 );
$table-row-bg-color-even						: get_color_tone( content, -300 );
$table-row-bg-color-hover						: get_color_tone( content, -200, primary );
$table-row-bg-color-hover-even					: get_color_tone( content, -300, primary );
$table-row-bg-color-active-hover				: get_color_tone( content, -200, secondary );
$table-row-bg-color-active-hover-even			: get_color_tone( content, -300, secondary );

$table-row-bg-color-success-even				: get_color_tone( content, -300, success );
$table-row-bg-color-success-hover-even			: get_color_tone( content, -300, success, 20% );
$table-row-bg-color-success-active-hover-even	: get_color_tone( content, -300, success, 30% );

$table-row-bg-color-danger-even					: get_color_tone( content, -300, danger );
$table-row-bg-color-danger-hover-even			: get_color_tone( content, -300, danger, 20% );
$table-row-bg-color-danger-active-hover-even	: get_color_tone( content, -300, danger, 30% );

//--color-background: #{get_color( $color, $alpha )};
//--color-border: #{get_color( $color, #{($alpha - 0.1) * 1.1 } )};
//--color-text: #{contrast( get_color( $color, $alpha ), $light, $dark )};

/** Datei: themes/lcars/assets.OLD/scss/_functions.scss **/
@function map-set( $map, $key, $value ) {
	@return map-merge( $map, ( $key: $value ) );
}

/** Datei: themes/lcars/assets.OLD/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;
					
					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-borderactive );
						--color-text: var( --color-text-active );
					}
					
					&: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;
					
					margin-top: #{$frame-gap * -1};
					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} {
				&:last-child,
				&:has( + #{$frame-fill} ) {
					margin-bottom: var( --gap-negate );
					border-bottom-width: 0;
				}
			
				+ #{$frame-fill} {
					border-top-width: 0;
				}
				
				&:first-child {
					margin-top: var( --gap-negate );
					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};
						}
					}
				}
				
				&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( --columWidth ) 1fr var( --columWidth );
			
			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} );
			
			& > * {
				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-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: 2 / -1; }
				
			}
			
			&-right {
				> #{$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-wrapper} {
					align-items: end;
				}
				
				> #{$frame-content} { grid-column: 1 / -2; }
			}
			
			@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; }
}

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

/** Datei: themes/lcars/assets.OLD/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 );
}

/** Datei: themes/lcars/assets.OLD/scss/_fonts.scss **/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
@font-face {
	font-family: 'Antonio';
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/antonio/v19/gNMEW3NwSYq_9WD3yHQiFQ.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	
	size-adjust: 110%;
	ascent-override: 97%;
}

.font--text {
	font-family: 'Source Sans 3', sans-serif;
	font-weight: 350;
}

.font--monospace {
	font-family: 'Source Code Pro', monospace;
	font-weight: 350;
}

.font--headline {
	font-family: 'Antonio', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
}

.font--button {
	font-family: 'Antonio', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
}

.font-size--dynamic {
	--font-size: max( 1rem, calc( var( --font-size--max, 100cqmin ) * var( --font-size--factor, 1 ) ) );
	
	container-type: size;
	font-size: var( --font-size );
}

@for $i from 1 through 100 {
	.font-size--dynamic-#{$i} {
		--font-size--max: #{$i}cqmin;
		@extend .font-size--dynamic;
	}
}

/** Datei: themes/lcars/assets.OLD/scss/_mixins.scss **/
@mixin glass( $color: #000, $alpha : 0.3, $radius : 1rem ) {
	background: rgba( #{red( $color )}, #{green( $color )}, #{blue( $color )}, $alpha );
	border-radius: $radius;
	box-shadow: 0 4px #{$radius * 2} rgba(0, 0, 0, 0.1);
	backdrop-filter: blur( 5px );
	@include glass-border( $color, $alpha - 0.1 );
}

@mixin glass-border( $color: #000, $alpha : 0.2 ) {
	border: 1px solid rgba( #{red( $color )}, #{green( $color )}, #{blue( $color )}, #{$alpha * 1.1 } );
}

@mixin transition( $transition: $transition ) {
	transition: #{$transition};
}

/** Datei: themes/lcars/assets.OLD/scss/styles.scss **/
@import '#{$restdir}/colors/mixins.scss';
@import '#{$restdir}/colors/functions.scss';
@import '#{$restdir}/colors/variables.scss';

@import 'fonts.scss';
@import 'mixins.scss';
@import "functions.scss";
@import "variables.scss";

@import '#{$restdir}/colors/styles.scss';

//@import '#{$restdir}/colors/styles.scss';
//@import 'framework.scss';


*, ::before, ::after {
	box-sizing: border-box !important;
}

html {
	font-family: sans-serif;
	font-size: 18px !important;
	line-height: 1.2222222222;
	height: 100%;
//	width: 100%;
	max-height: var( --app-h, 100dvh );
//	max-width: var( --app-w, 100vw );
	margin: 0;
	padding: 0;
	background: #000;
	color: #FFF;
	
	container: root / size;
	
	--app-k-top: env(keyboard-inset-top);
	--app-k-left: env(keyboard-inset-left);
	--app-k-right: env(keyboard-inset-right);
	--app-k-bottom: env(keyboard-inset-bottom);
	--app-k-height: env(keyboard-inset-height);
	--app-k-width: env(keyboard-inset-width);
	
//	position: absolute;
//
//	top: env( safe-area-inset-top, 0px );
//	left: env( safe-area-inset-left, 0px );
//	right: env( safe-area-inset-right, 0px );
//	bottom: env( safe-area-inset-bottom, 0px );
	
}

body {
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.theme {
	background: #000000;
	color: #ffffff;
	
	@media ( max-width: 600px ) {
		--maxSidebar: #{map-get( $frame-sizes, sm )};
	}
	
	> * {
		padding: 10px;
	}
}

.tooltip {
	position: absolute;
	z-index: 100;
	background: #000;
	color: #fff;
	border: 1px solid #fff;
	padding: 5px 10px;
	border-radius: 5px;
	
	&__ {
		&anchor {
			cursor: pointer;
			
			* {
				pointer-events: none;
			}
		}
		
		&top { translate: -50% 5px; }
		&right { translate: 5px -50%; }
		&left { translate: calc(-100% - 5px) -50%; }
	}
}

@import 'frame/styles.scss';

@import '#{$restdir}/functions';
@import '#{$restdir}/layout/form';
@import '#{$restdir}/layout/table';
@import '#{$restdir}/wrapper/dialog';

.menu__item, .menu__category, .menu__sub {
	display: contents;
}

.form {
}


.notification {
	$notify: & !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 );
	
	font-family: sans-serif;
	padding: #{$frame-padding};
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: #{$frame-padding * 2 + $frame-border-width};
	
	--size: calc( min( 100cqi, var( --height, #{$frame-inner-button} ) ) - #{($frame-padding + $frame-border-width) * 2} );
	
	&__ {
		&wrapper {
			$notify-wrapper: & !global;
			
			position: relative;
			height: var( --navbar );
			overflow: hidden;
			
			display: flex;
			flex-direction: column;
			justify-content: end;
		}
		
		&close {
			$notify-close: & !global;
			
			display: none;
		}
		
		&inner {
			$notify-inner: & !global;
			
			font-size: calc( ( var( --size ) - #{$frame-padding} ) / 2 );
			white-space: nowrap;
			overflow: hidden;
			
			height: var( --size );
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		
		&title {
			$notify-title: & !global;
			
			text-transform: uppercase;
			font-weight: 600;
		}
	}
	
	.icon {
		height: var( --size );
		font-size: var( --size );
		aspect-ratio: 1;
		
		display: inline-flex;
		align-items: center;
		justify-content: center;
		
		&::before { vertical-align: -0.01em; }
	}
	
	&-- {
		&stacked {
			flex-direction: column !important;
			
			#{$notify} {
				z-index: 1;
				position: relative;
				margin-top: 0;
			}
		}
		
		&show-on-hover {
			#{$notify} {
				gap: 0rem;
				cursor: help;
				transition: all 200ms ease-in-out;
			}
			
			#{$notify-inner} {
				max-width: 0;
				transition: all 200ms ease-in-out;
			}
			
			&.hover,
			&:hover {
				#{$notify-inner} {
					margin-left: #{$frame-padding * 2 + $frame-border-width};
					max-width: 400px;
				}
			}
		}
	}
}

.keyboard {
	--count: calc( var( --tiles ) - var( --columns ) * ( var( --rows ) - 1 ) );
	--height: calc( ( 100cqh - ( ( var( --rows ) - 1 ) * var( --gap ) ) ) / var( --rows ) );
	
	display: grid;
	grid-template-columns: repeat( var( --columns ), 1fr );
//	grid-template-rows: repeat( sqrt( var( --count ) ), 1fr );
	gap: var(--gap);
	overflow: hidden;
	
	.button {
//		aspect-ratio: 1;
		
		align-self: stretch;
		justify-self: stretch;
		
		.label {
			height: 100%;
			font-size: calc( var( --height ) / 2 );
			display: flex;
			align-items: end;
		}
		
		
		&:last-child {
			grid-column-end: -1;
			grid-column-start: var( --count );
		}
	}
}

.template {
	&-- {
		&login {
			@container root ( width > 800px ) and ( height > 800px ) {
				#main_section_content {
					width: min( 800px, 100% );
					height: min( 400px, 100% );
					align-self: center;
					justify-self: center;
					
					@container root (orientation: landscape) and (aspect-ratio > 1.5) {
						flex-direction: row;
					}
				}
			}
			
			#content_section_content {
				gap: #{$frame-spacing};
				
				> * {
					flex: 1 1 50%;
					justify-content: center;
				}
				
				@container content (orientation: landscape) and (aspect-ratio > 1.5) {
					flex-direction: row;
					
					> * {
						flex-basis: 50%;
					}
				}
			}
		}
	}
}

#main_section:not(.frame--aside-left):not(.frame--aside-right) {
	#content_section {
		&.frame--aside-left {
			#content_section_content {
				margin-right: calc( var( --header, var( --footet, 0px ) ) + #{$frame-gap} );
			}
		}
	}
}

.error {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	gap: #{$frame-spacing};
	
	@container error (aspect-ratio < 1.5) {
		flex-direction: column;
		--error-w: 6cqw;
	}
	
	@container error (aspect-ratio >= 1.5) {
		flex-direction: row;
	}
	
	@container error (orientation: landscape) {
	}
	
	&__ {
		&wrapper {
			@include colorize( get_color( 'danger' ) );
		
			color: var( --color-border-hover );
			
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			gap: #{$frame-spacing};
			
			container: error / size;
			
			--error-h: 20cqh;
			--error-w: 4cqw;
			--error-i: 5;
			--error-c: 2;
			--error-m: 1;
		}
		
		&icon {
			svg {
				display: block;
				height: auto;
				width: auto;
				
				height: calc( min( var(--error-h), var(--error-w ) ) * var( --error-i ) );
				
				@container root ( width <= 800px ) or ( height <= 800px ) {
					@container content (orientation: portrait) {
//						height: min( #{$error-iconsvg-min * $error-faktor-portrait}, #{$error-iconsvg-max * $error-faktor-portrait} );
					}
					
					@container content (orientation: landscape) {
//						height: min( #{$error-iconsvg-min}, #{$error-iconsvg-max} );
					}
				}
			}
		}
		
		&text {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			@container root ( width <= 800px ) or ( height <= 800px ) {
				@container content (orientation: landscape) {
					align-items: start;
				}
			}
		}
		
		&caption {
			font-size: calc( min( var(--error-h), var(--error-w ) ) * var( --error-c ) );
			text-align: center;
			gap: #{$frame-gap};
			margin: 0;
			
			@container root ( width <= 800px ) or ( height <= 800px ) {
				@container content (orientation: portrait) {
//					font-size: min( #{$error-caption-min * $error-faktor-portrait}, #{$error-caption-max * $error-faktor-portrait} );
				}
				
				@container content (orientation: landscape) {
//					font-size: min( #{$error-caption-min}, #{$error-caption-max} );
				}
			}
		}
		
		&message {
			font-size: calc( min( var(--error-h), var(--error-w ) ) * var( --error-m ) );
			text-align: center;
			margin: 0;
			
			@container root ( width <= 800px ) or ( height <= 800px ) {
				@container content (orientation: portrait) {
//					font-size: min( #{$error-message-min * $error-faktor-portrait}, #{$error-message-max * $error-faktor-portrait} );
				}
				
				@container content (orientation: landscape) {
//					font-size: min( #{$error-message-min}, #{$error-message-max} );
				}
			}
			
		}
	}
}

.tabs__item--active {
	@include colorize( get_color( 'secondary' ) );
	max-inline-size: 100vw !important;
}

.dialog {
	backdrop-filter: blur( 3px );
	background: get_color( 'black', 0.8 );
	color: inherit;
	outline: 0;
	
	position: relative;
	display: contents;
	
	&__{
		&wrapper {
			flex-basis: 50%;
			
			min-height: #{$frame-gap * 4 + map-get( $frame-sizes, 'sm' ) * 5 };
			background: transparent;
			border-radius: #{$frame-border-radius};
			display: grid;
			box-shadow: none;
			padding: 0;
			
			height: calc( var(--height) + #{$frame-gap * 4 + map-get( $frame-sizes, 'sm' ) * 4 } );
			
			> .frame__section {
				grid-column: auto;
				grid-row: auto;
			}
			
			max-width: 100%;
			height: 100%;
		}
	}
}