_sass/pages/_installation.scss
@use 'sass:color';
@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;


/** SPECIAL INSTALLATION PAGE **/

body.installation{
	
	.pagetitle h1{
		@include headline-1;
	}
	
	.aboutthispage{
		margin-top: 60px;
	}
	
	.hidden.instruction-collection{
		display: none;
	}
	
	.visually-hidden{
		visibility: hidden;
	}
	
	.selection-head{
		h3{
			@include title-1;
			cursor: pointer;
			position: relative;
			margin: 0;
			padding-right: 55px;
			.selected{
				@include label-1;
				margin-left: 20px;
			}
			&::after{
				content: " ";
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%230D0D0D' stroke-linecap='square' stroke-width='1.5' d='m18 9.5-6 6-6-6'/%3E%3C/svg%3E");
				background-color: var(--doc-codebox-button-background-color, #E6E6E6);
				background-size: contain;
				background-repeat: no-repeat;
				width: 28px;
				height: 28px;
				border-radius: 50%;
				position: absolute;
				right: 0px;
				top: -5px;
				-webkit-transition: -webkit-transform .3s;
				transition: -webkit-transform .3s;
				-o-transition: transform .3s;
				transition: transform .3s;
				transition: transform .3s, -webkit-transform .3s;
				cursor: pointer;
			}
		}
		
		a:hover{
			background-color: transparent;
		}
	}
	.selection-foldout{
		padding: 16px;
		background: var(--doc-codebox-background-color, #F2F2F2);
		-webkit-transition: background-color .3s;
		-o-transition: background-color .3s;
		transition: background-color .3s;
		margin-bottom: 8px;
		border-radius: 10px;
		border: 1px solid transparent;
		-webkit-transition: border .3s;
		-o-transition: border .3s;
		transition: border .3s;
		
		&.open h3::after{
			-webkit-transform: rotate(180deg);
				-ms-transform: rotate(180deg);
					transform: rotate(180deg);
		}
		
		&:hover{
			border-color: var(--doc-codebox-border-color);
		}
		
		h4{
			@include label-1;
		}
		
		.architecture-wrap h4{
			margin-top: 30px;
			margin-bottom: 15px;
		}
		
		&.disabled{
			display: none;
		}
		
	}
	.selection-foldout:not(.open) .selection-content{
		display: none;
		max-width: calc(100% - 55px);
		>p:first-child{
			margin-top: 0;
		}
	}
	
	.selection-head + .selection-content{
		padding-top: 24px;
	}
	
	.selection-options{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 8px;
		
		.option{
			border-radius: 10px;
			border: 1px solid var(--interactive-folderbox-border-color, #E6E6E6);
			background: var(--interactive-folderbox-background-color, rgba(250, 250, 250, 0.60));
			display: flex;
			gap: 10px;
			height: 60px;
			padding: 10px;
			align-items: center;
			cursor: pointer;
			z-index: 4;
			transition: all .3s;
			
			.label{
				@include label-1;
			}
			
			.symbol {
				border-radius: 6px;
				border: 1px solid var(--interactive-folderbox-border-color, #E6E6E6);
				background: var(--interactive-installation-icon-background, rgba(230, 230, 230, 0.60));
				display: block;
				flex-shrink: 0;
				width: 40px;
				height: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: all .3s;
			
				img {
					max-width: 21px;
					max-height: 21px;
					margin: 0 !important;
				}
			}
			
			&:hover{
				border: 1px solid var(--interactive-folderbox-border-color-hover, #CCC);
				background: var(--interactive-folderbox-background-color-hover, rgba(242, 242, 242, 0.60));
				.symbol{
					border: 1px solid var(--interactive-folderbox-border-color-hover, #CCC);
					background: var(--interactive-installation-icon-background, rgba(230, 230, 230, 0.60));
				}
			}
			
			&:focus-visible{
				outline: none;
			}
		}
		
		.option.active{
			border: 1px solid var(--interactive-installation-box-border, #BEB3FF);
			background: var(--interactive-installation-box-background, #E9E5FF);
			
			.symbol{
				border: 1px solid var(--interactive-installation-box-border, #BEB3FF);
				background: var(--interactive-installation-icon-background-selected, #D4CCFF);
			}
		}
	}
	
	.selection-options[data-role="platform"] .platform-item {
		position: relative;
		display: inline-flex;
		align-items: center;
		height: 60px;
	}
	
	.selection-options[data-role="platform"] .platform-item .arch-inline {
		display: inline-flex;
		flex-wrap: nowrap;
		gap: 8px;
		border-radius: 10px;
		padding: 6px 0px;
		opacity: 0;
		pointer-events: none;
		z-index: 2;
		width: 0;
		transition: all .3s;
		//min-width: 160px; 
		
		.option{
			height: unset;
			
			.label{
				@include label-2;
			}
		}
		
		.option:nth-child(2){
			transform: translateX(-10%);
			transition: all .3s;
		}
		
		&.open {
			opacity: 1;
			pointer-events: auto;
			padding: 6px 8px;
			width: 150px;
			.option:nth-child(2){
				transform: translateX(0);
			}
		}
		
		&.error{
			.option{
				border: 1px solid var(--interactive-installation-error-border, #FFA566);
				background: var(--interactive-folderbox-background-color, rgba(250, 250, 250, 0.60));
			}
		}
	}
	
	
	.installation-instructions,
	.instruction-collection{
		margin-top: 50px;
		
		h2{
			.currentversion{
				color: var(--main-text-secondary-color, #666);
				font-size: 12px;
				margin-left: 10px;
				font-weight: 400;
			}
		}
		
		h4{
			@include title-1;
			margin-top: 30px;
			margin-bottom: 15px;
		}
		
		.note{
			@include body-small;
			margin-top: 15px;
			a{
				color: inherit;
				text-decoration: underline;
			}
		}
		
		#result{
			.alternative{
				padding-top: 10px;
				padding-bottom: 30px;
				display: none;
			}
			.more{
				display: flex;
				flex-wrap: wrap;
				gap: 10px;
				margin-top: 30px;
				color: var(--main-text-tertiary-color, #B2B2B2);
				@include label-1;
				font-weight: 400;
				
				a{
					cursor: pointer;
					&:after{
						content: "";
						display: inline-block;
						background-size: contain;
						background-repeat: no-repeat;
						margin-left: 5px;
					}
				}
			}
			.docs-link{
				//color: var(--main-text-secondary-color, #666666);
				color: var(--main-text-primary-color, #0D0D0D);
				text-decoration: none;
				
				border: 1px solid var(--interactive-folderbox-border-color, #E6E6E6);
				border-radius: 50px;
				padding: 12px 20px;
				transition: border .3s;
				
				&:after{
					width: 13px;
					height: 10px;
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' fill='none' viewBox='0 0 13 10'%3E%3Cpath fill='%23000000' d='M12.472 5 8.146 9.354 7.25 8.43l2.758-2.744H0V4.328h10.036L7.25 1.57l.896-.924L12.472 5Z'/%3E%3C/svg%3E");
				}
				
				&:hover{
					border: 1px solid var(--interactive-folderbox-border-color-hover, #CCC);
				}
			}
			.alternative-options{
				background: none;
				border: none;
				padding: 0;
				font: inherit;
				//color: var(--main-text-secondary-color, #666666);
				color: var(--main-text-primary-color, #0D0D0D);
				text-decoration: none;
				
				border: 1px solid var(--interactive-folderbox-border-color, #E6E6E6);
				border-radius: 50px;
				padding: 12px 20px;
				transition: border .3s;
				
				&:after{
					width: 13px;
					height: 9px;
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9' fill='none' viewBox='0 0 13 9'%3E%3Cpath stroke='%23000000' stroke-width='1.5' d='M1 1.5 6.5 7 12 1.5'/%3E%3C/svg%3E");
				}
				
				&:hover{
					border: 1px solid var(--interactive-folderbox-border-color-hover, #CCC);
				}
			}
			.alternative-options[aria-expanded="true"]{
				&:after{
					transform: rotate(180deg);
				}
			}
		}
		
		// Code blocks
		code,
		pre {
			@include code-standard;
			border-radius: 2px;
			font-family: $fontMono;
			padding: 1px 0;
			margin: 0;
			-webkit-font-feature-settings: "ss19";
			font-feature-settings: "ss19";
		}
		
		pre {
			padding: 16px; /* instead of 10px */
			overflow: auto;
			border-radius: 10px;
			background: var(--doc-codebox-background-color, #F2F2F2);
			white-space: pre;
			overflow-x: auto;
		
			&.highlight {
				tab-size: 4;
				-moz-tab-size: 4;
				-o-tab-size: 4;
				padding: 15px;
		
				&::-webkit-scrollbar {
					height: 5px;
				}
				&::-webkit-scrollbar-track {
					background: var(--doc-scrollbar-bg, #E6E6E6);
				}
				&::-webkit-scrollbar-thumb {
					background: var(--doc-scrollbar-slider, #CCC);
				}
			}
		
			code {
				display: block;
				box-shadow: none;
			}
			
			a{
				text-decoration: none;
				color: inherit;
				
				&:hover{
					text-decoration: underline;
				}
			}
		}
		
		code.highlighter-rouge,
		code.language-plaintext {
			border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
			background: var(--doc-codebox-background-color, #F2F2F2);
			font-family: $fontMonoMedium;
			border-radius: 3px;
			padding: 0 2px;
			margin: 0;
		
			em {
				font-family: $fontMonoItalicMedium;
			}
		}
		
		div.highlight,
		figure.highlight {
			width: 100%;
			position: relative;
			border-radius: 10px;
			overflow: hidden;
			transition: border-color 0.3s;
			background: var(--doc-codebox-background-color, #F2F2F2);
			border: 1px solid var(--doc-codebox-border-color, #D9D9D9);
		}
		
		.language-text div.highlight {
			border: none;
		}
		
		.language-console {
			div.highlight {
				border: 1px solid var(--doc-warning-border-color, rgba(255, 204, 204, 0.60));
			}
		
			pre {
				background: var(--doc-warning-background-color, rgba(255, 229, 229, 0.60));
			}
		}
		
	}
	
	.installation-hint{
		display: inline-flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 6px;
		margin-left: 8px;
		vertical-align: middle;
		
		p{
			margin: 0;
			font-size: var(--type-label-1);
			font-weight: 600;
			color: var(--orange-50, #FF6900);
		}
		
		svg{
			width: 15px;
			height: 15px;
			transform: translateY(-1px);
		}
	}
	
	a.download-btn{
		display: flex!important;
		justify-content: flex-start;
		align-items: center;
		width: fit-content;
		gap: 10px;
		padding: 10px 15px 10px 10px;
		border-radius: 10px;
		border: 1px solid var(--interactive-folderbox-border-color, #E6E6E6);
		background: var(--interactive-folderbox-background-color, rgba(250, 250, 250, 0.60));
		transition: all .3s;
		text-decoration: none;
		color: inherit;
		@include label-1;
		
		&:before{
			border-radius: 6px;
			border: 1px solid var(--interactive-folderbox-border-color, #E6E6E6);
			background-color: var(--interactive-installation-icon-background, rgba(230, 230, 230, 0.60));
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 18 18'%3E%3Cpath fill='%231A1A1A' d='M9.92.646v8.898l3.217-3.249 1.3 1.313L9 13.098l-5.437-5.49 1.3-1.313 3.218 3.25v-8.9h1.838Zm-7.816 10.21v4.642h13.792v-4.641h1.838v6.498H.267v-6.498h1.838Z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-size: 17.5px;
			background-position: center center;
			width: 40px;
			height: 40px;
			content: "";
			display: inline-block;
			transition: all .3s;
		}
		
		&:after{
			display: none!important;
		}
		
		&:hover{
			border: 1px solid var(--interactive-folderbox-border-color-hover, #CCC);
			background-color: var(--interactive-folderbox-background-color, rgba(250, 250, 250, 0.60));
			&::before{
				border: 1px solid var(--interactive-folderbox-border-color-hover, #CCC);
				background-color: var(--interactive-installation-icon-background, rgba(230, 230, 230, 0.60));
			}
		}
	}
	
	.shainfo{
		margin-top: 10px;
		
		span:first-child{
			font-weight: 700;
			margin-right: 5px;
		}
		span{
			@include code-standard;
			font-size: 14px;
		}
	}
	
	

	

	/** ORIGINAL INSTALLATION CSS **/
	
	main .wrap, main .wrap #main_content_wrap{
		//max-width: 100%;
	}
	.yourselection{
		position: relative;
		border: 1px solid var(--doc-codebox-border-color, #E6E6E6);;
		border-radius: 15px;
		margin-top: 25px;
		.select.hide {
			opacity: 0.4;
			pointer-events: none;
			ul li{
				cursor: auto;
				border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
			}
		}
		.select li.inactive {
			opacity: 0.4;
			pointer-events: none;
		}
		.select ul{
			padding-left: 0!important;
		}
	}
	main .select{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		border-bottom: 1px solid var(--doc-codebox-border-color, #E6E6E6);
		padding: 25px 20px;
		.info{
			@include body-small();
			width: 100%;
			margin-left: 162px;
			margin-top: 8px;
		}
		h3{
			@include title-2();
			width: 162px;
			-ms-flex-negative: 0;
				flex-shrink: 0;
			margin: 0!important;
			letter-spacing: -0.17px;
			padding-top: 8px;
		}
		ul{
			padding: 0;
			margin: 0;
			list-style: none;
			width: calc(100% - 162px);
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
				flex-wrap: wrap;
			pointer-events: all;
			gap: 5px;
			-webkit-box-align: center;
				-ms-flex-align: center;
					align-items: center;
			.disabled-choice {
				opacity: 0.4;
				pointer-events: none;
				cursor: default;
			}
			li{
				line-height: 1;
				display: block;
				white-space: nowrap;
				padding: 8px 14px;
				border: 1px solid transparent;
				background-color: transparent;
				color: var(--interactive-filter-unselected-text-color, #666);
				border-radius: 50px;
				font-weight: 500;
				@include label-1();
				cursor: pointer;
				-webkit-transition: background-color .2s;
				-o-transition: background-color .2s;
				transition: background-color .2s;
				-webkit-user-select: none;
				   -moz-user-select: none;
					-ms-user-select: none;
						user-select: none;
				span.versioninfo{
					color: color.scale($duckDBlightgrey, $lightness: -40%);
				}
				&:hover{
					border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
					//background-color: var(--interactive-filter-selected-background-color, #E6E6E6);
				}
				&.selected{
					background: var(--interactive-filter-selected-background-color, #E6E6E6);
					color: var(--interactive-filter-selected-text-color, #1A1A1A);
				}
			}
			.disabled-choice{
				opacity: 0.4;
				pointer-events: none;
				cursor: default;
			}
		}
		&.inactive{
			opacity: .4;
			pointer-events: none;
		}
		&.inactive ul{
			pointer-events: none;
		}
	}
	.select.hide .disabled-choice {
		opacity: 1;
	}
	.output{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding: 25px 20px;
		position: relative;
		h3{
			font-size: 17px!important;
			font-weight: 600!important;
			width: 162px;
			-ms-flex-negative: 0;
				flex-shrink: 0;
			margin: 0!important;
			letter-spacing: -0.17px;
			padding-top: 8px;
		}
		.result{
			@include code-standard();
			padding: 12px 12px 14px 14px;
			border-radius: 10px;
			border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
			background: var(--doc-codebox-background-color, #F2F2F2);
			position: relative;
			width: calc(100% - 162px);
			pre{
				padding: 0;
				margin: 0;
			}
			a{
				word-wrap: break-word;
				word-break: break-word;
			}
			a.externallink{
				line-height: 1.6;
			}
		}
	}
	.sha256_btn,
	.sha512_btn{
		border-radius: 40px;
		border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
		background: var(--main-codebox-sub-background-color, rgba(230, 230, 230, 0.60));
		cursor: pointer;
		font-family: $fontMono;
		padding: 3px 8px;
		font-weight: 600;
		font-size: 11px;
		vertical-align: bottom;
		display: inline-block;
		margin-top: 10px;
		&.active{
			color: var(--doc-menu-info-deprecated-border-color, #A899FF);
		}
	}
	.sha256.output,
	.sha512.output{
		padding-top: 0;
		display: none;
		.result{
			word-break: break-all;
		}
	}
	.link.output{
		.result a{
			display: block;
		}
	}
	.note.output{
		padding-top: 0px;
		.result{
			font-family: $fontSans;
			color: var(--main-text-primary-color, #0D0D0D);
			padding: 0;
			border: 0;
			background: transparent;
			&::before{
				content: "Note: ";
			}
		}
	}
	.possibleresults{
		display: none;
	}
	.wrap a.sha512{
		border-radius: 50px;
		background-color: $black300;
		border: 1px solid $black400;
		text-decoration: none;
		padding: 0px 7px;
		-webkit-transition: background-color .3s, border-color 3s;
		-o-transition: background-color .3s, border-color 3s;
		transition: background-color .3s, border-color 3s;
		&:hover{
			color: black;
			background-color: color.scale($black300, $lightness: -4%);
			border: 1px solid color.scale($black400, $lightness: -4%);
		}
	}
	#sidebar{
		display: none;
	}
}

body.installation{
	.environmentselect{
		background-color: color.scale($duckDBlightgrey, $lightness: -5%);
		color: black;
		border: none;
		border-bottom: 2px solid rgba(0,0,0,0.4);
		&:focus, &:active{
			outline: 0;
			border: none;
			border-radius: 0;
			border-bottom: 2px solid rgba(0,0,0,0.4);
		}
	}
}
body.installation .environment.select label.onlymobile{
	&::after{
		color: black;
	}
}
