_sass/abstracts/_mixins.scss
@use 'variables' as *;


@mixin display-1 {
	font-size: var(--type-display-1, 57px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.00249em;
	font-family: "SuisseIntl", sans-serif;
}

@mixin display-2 {
	font-size: var(--type-display-2, 45px);
	font-weight: 600;
	line-height: 1.2;
	font-family: "SuisseIntl", sans-serif;
}

@mixin display-3 {
	font-size: var(--type-display-3, 36px);
	font-weight: 600;
	line-height: 1.2;
	font-family: "SuisseIntl", sans-serif;
}

@mixin headline-1 {
	font-size: var(--type-headline-1, 32px);
	font-weight: 600;
	line-height: 1.2;
	font-family: "SuisseIntl", sans-serif;
}

@mixin headline-2 {
	font-size: var(--type-headline-2, 28px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.001em;
	font-family: "SuisseIntl", sans-serif;
}

@mixin headline-3 {
	font-size: var(--type-headline-3, 24px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.001em;
	font-family: "SuisseIntl", sans-serif;
}

@mixin title-1 {
	font-size: var(--type-title-1, 18px);
	font-weight: 600;
	line-height: 1.2;
	font-family: "SuisseIntl", sans-serif;
}

@mixin title-2 {
	font-size: var(--type-title-2, 16px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.001em;
	font-family: "SuisseIntl", sans-serif;
}

@mixin title-3 {
	font-size: var(--type-title-3, 14px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.001em;
	font-family: "SuisseIntl", sans-serif;
}

@mixin label-1 {
	font-size: var(--type-label-1, 14px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.001em;
	font-family: "SuisseIntl", sans-serif;
}

@mixin label-2 {
	font-size: var(--type-label-2, 12px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.001em;
	font-family: "SuisseIntl", sans-serif;
}

@mixin label-3 {
	font-size: var(--type-label-3, 11px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.005em;
	font-family: "SuisseIntl", sans-serif;
}

@mixin body-large {
	font-size: var(--type-body-large, 18px);
	font-weight: var(--type-weight-standard, 450);
	line-height: 1.6;
	font-family: "SuisseIntl", sans-serif;
}

@mixin body-standard {
	font-size: var(--type-body-normal, 16px);
	font-weight: var(--type-weight-standard, 450);
	line-height: 1.5;
	letter-spacing: 0.0025em;
	font-family: "SuisseIntl", sans-serif;
}

@mixin body-small {
	font-size: var(--type-body-small, 14px);
	font-weight: var(--type-weight-standard, 450);
	line-height: 1.4;
	letter-spacing: 0.005em;
	font-family: "SuisseIntl", sans-serif;
}

@mixin tiny {
	font-size: var(--type-tiny, 12px);
	font-weight: var(--type-weight-standard, 450);
	line-height: 1.2;
	letter-spacing: 0.005em;
	font-family: "SuisseIntl", sans-serif;
}

@mixin pre-title {
	font-size: var(--type-pre-title, 13px);
	text-transform: uppercase;
	font-weight: var(--type-weight-standard, 450);
	line-height: 1.2;
	letter-spacing: 0.03em;
	font-family: "SuisseIntl", sans-serif;
}

@mixin menu-item {
	font-size: var(--type-menu-items, 15px);
	font-weight: 450;
	line-height: 1;
	font-family: "SuisseIntl", sans-serif;
}

@mixin code-standard {
	font-size: var(--type-code, 14px);
	line-height: 1.4;
	font-family: "JetBrainsMono-Regular";
}

@mixin code-large {
	font-size: var(--type-code-large, 16px);
	line-height: 1.4;
	font-family: "JetBrainsMono-Regular";
}

.max-width-small{
	max-width: var(--page-max-width-small, 750px);
}

.max-width-medium{
	max-width: var(--page-max-width-medium, 950px);
}

.max-width-large{
	max-width: var(--page-max-width-large, 1150px);
}


@mixin button {
	@include label-1;
	display: inline-block;
	cursor: pointer;
	transition: all .3s;
	padding: 12px 20px;
	border-radius: 100px;
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
	margin-right: 10px;
	&.yellow{
		background: var(--interactive-button-yellow-background-color, #FFF100);
		border: 1px solid var(--interactive-button-yellow-border-color-hover, #EDDD0C);
		color: #000;
		&:hover{
			background: var(--interactive-button-primary-yellow-background-color-hover, #FFF866);
			border: 1px solid var(--interactive-button-primary-yellow-border-color-hover, #FFF21A);
		}
	}
	&.blue{
		background: var(--blue-70, #2EAFFF);
		border: 1px solid var(--blue-60, #58A8DA);
		color: #000;
		&:hover{

		}
	}
	&.black{
		background: var(--main-text-primary-color, #F2F2F2);
		border: 1px solid black;
		color: var(--main-body-background-color, #0D0D0D);
		&:hover{
	
		}
	}
	&.orange{
		border: 1px solid var(--interactive-button-primary-orange-border, #CC5400);
		background: var(--interactive-button-primary-orange-background, #FF6900);
		color: #000;
		&:hover{
			background: var(--interactive-button-primary-orange-background-hover, #FFA566);
			border: 1px solid var(--interactive-button-primary-orange-border-hover, #FF8733);
		}
	}
	&.transparent{
		border: 1px solid var(--interactive-button-black-border-color, #1A1A1A);
		backdrop-filter: blur(5px);
		&:hover{
			border: 1px solid var(--interactive-button-black-border-color, #1A1A1A);
			background: var(--interactive-button-black-border-color-hover, #1A1A1A);
			color: var(--interactive-button-black-text-color, #E6E6E6);
		}
	}
	&.white{
		background: white;
		color: black;
		&:hover{
			background: #7D66FF;
			color: white;
		}
	}
	&.arrow-down::after{
		content: "↓";
		margin-left: 5px;
	}
	&.arrow-right{
		&:after{
			/*background-image: url("data:image/svg+xml,%3Csvg width='13' height='9' viewBox='0 0 13 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.472 4.64599L8.146 8.99999L7.25 8.07599L10.008 5.33199H0V3.97399H10.036L7.25 1.21599L8.146 0.291992L12.472 4.64599Z' fill='black'/%3E%3C/svg%3E%0A");
			content: "";
			width: 13px;
			height: 9px;
			background-size: contain;
			display: inline-block;
			*/
			margin-left: 5px;
			transition: all .25s;
			content: "→";
		}
		&:hover:after{
			margin-left: 12px;
		}
	}
	&:hover{
		text-decoration: none;
	}
}

@mixin textbutton{
	@include label-1;
	color: inherit;
	text-decoration: none;
	display: inline;
	&.arrow-right{
		&:after{
			/*
			background-image: url("data:image/svg+xml,%3Csvg width='13' height='9' viewBox='0 0 13 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.472 4.64599L8.146 8.99999L7.25 8.07599L10.008 5.33199H0V3.97399H10.036L7.25 1.21599L8.146 0.291992L12.472 4.64599Z' fill='black'/%3E%3C/svg%3E%0A");
			content: "";
			width: 13px;
			height: 9px;
			background-size: contain;
			display: inline-block;
			*/
			content: "→";
			margin-left: 5px;
			transition: all .25s;
		}
		&:hover:after{
			margin-left: 12px;
			/*background-image: url("data:image/svg+xml,%3Csvg width='13' height='9' viewBox='0 0 13 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.472 4.64599L8.146 8.99999L7.25 8.07599L10.008 5.33199H0V3.97399H10.036L7.25 1.21599L8.146 0.291992L12.472 4.64599Z' fill='%237D66FF'/%3E%3C/svg%3E%0A");*/
		}
	}
	&:hover{
		color: $purple;
	}
}

@mixin textlink {
	color: $duckDBgrey;
	text-decoration: underline;
	font-size: 14px;
	-webkit-transition: color .3s;
	-o-transition: color .3s;
	transition: color .3s;
	span::after{
		content: "→";
		font-family: "DuckDB-Symbol";
		margin-left: 6px;
		-webkit-transition: -webkit-transform .3s;
		transition: -webkit-transform .3s;
		-o-transition: transform .3s;
		transition: transform .3s;
		transition: transform .3s, -webkit-transform .3s;
		position: absolute;
		text-decoration: none;
		line-height: 1.5;
	}
	&:hover span::after{
		-webkit-transform: translateX(3px);
			-ms-transform: translateX(3px);
				transform: translateX(3px);
	}
}

@mixin blog-typography {
	p, ul li, ol li {
		@include body-large();
		margin-top: 30px;
		margin-bottom: 30px;
		i, em {
			font-family: $fontSans;
			font-style: italic;
		}
	}
	
	ul li, ol li {
		margin-top: 0;
		margin-bottom: 0;
	}
	
	h1 {
		margin-top: 60px;
		font-weight: 500;
	}
	
	h2 {
		@include headline-1();
		margin-top: 60px;
	}
	
	h3 {
		@include headline-2();
		margin-top: 60px;
	}
	
	h4 {
		@include headline-3();
		margin-top: 60px;
	}
	
	h5 {
		@include title-1();
		margin-top: 60px;
	}
	
	h2 + h3,
	h3 + h4 {
		margin-top: 30px;
	}
	
	blockquote {
		h4 {
			@include title-2();
			margin-top: 0;
		}
		ul {
			padding: 0 0 0 20px;
		}
		ul li, 
		ol li,
		p {
			@include body-standard();
		}
		p {
			margin: .8em 0;
		}
	}
	
	table {
		text-align: left;
		code {
			@include code-standard();
		}
		code.highlight {
			padding: 2px 6px;
			border-radius: 6px !important;
			margin-left: 0;
			line-height: 27px;
		}
	}
	
	table thead th {
		@include title-2();
	}
	
	table tbody td {
		@include body-standard();
		padding: 10px;
		vertical-align: middle;
	}
	
	table tbody tr:hover {
		background: var(--doc-codebox-border-color, #E6E6E6);
	}
	
	div.highlight {
		max-width: 750px;
	}
	
	div.highlighter-rouge + table,
	table + div.highlighter-rouge {
		margin-top: 30px;
	}
	
	.highlighter-rouge,
	table {
		margin-bottom: 20px;
	}
	
	hr {
		margin: 50px 0 50px 0;
		border: 0.5px solid rgb(229, 229, 229);
	}
	
	iframe {
		outline: 0;
		border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
	}
	
	code,
	pre {
		@include code-large;
	}

	p code,
	li code,
	code.highlighter-rouge,
	code.language-plaintext {
		border: 1px solid var(--doc-codebox-border-color, #E6E6E6);
		background: var(--doc-codebox-background-color, #F2F2F2);
		font-family: "JetBrainsMono-Medium", "Lucida Console", monospace;
		border-radius: 3px;
		padding: 0px 2px;
		margin: 0;
		margin-bottom: 0px;
	}
	li .highlight pre > code{
		border: none;
		padding: 0;
		background: unset;
	}

	h1, h2, h3, h4, h5 {
		code, pre {
			font-size: inherit;
		}
	}
}

.duckdb_logo,
#duckdb_logo{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' version='1.1' viewBox='0 0 131.767 38'%3E%3Cdefs%3E%3Cstyle%3E.st0%7Bfill:%231d1d1b%7D.st1%7Bfill:%23fff100%7D%3C/style%3E%3C/defs%3E%3Cpath d='M19 38.055c-10.493 0-19-8.507-19-19s8.464-19 19-19 19 8.507 19 19-8.507 19-19 19Z' style='fill:%231a1a1a'/%3E%3Cpath d='M14.444 11.196c-4.318 0-7.859 3.54-7.859 7.86 0 4.36 3.54 7.858 7.86 7.858 4.317 0 7.858-3.54 7.858-7.859s-3.54-7.859-7.859-7.859ZM28.586 16.227h-3.735v5.657h3.735a2.828 2.828 0 0 0 0-5.657Z' class='st1'/%3E%3Cpath d='M70.301 22.123c0 1.684-.475 3.093-2.245 3.093s-2.246-1.409-2.246-3.093v-7.168h-3.195v7.859c0 3.066 2.461 4.853 5.44 4.853 2.98 0 5.442-1.787 5.442-4.853v-7.86H70.3v7.17ZM51.43 10.66h-4.954v16.703h4.954c5.3 0 9.286-1.728 9.286-8.363 0-6.636-3.987-8.34-9.286-8.34Zm-.138 14.123h-1.52V13.24h1.52c3.04 0 6.014.76 6.014 5.76 0 5.045-2.973 5.783-6.014 5.783ZM81.639 25.197c-1.751 0-2.996-1.45-2.996-4.054 0-2.581 1.314-3.986 2.972-3.986 1.222 0 2.327.852 2.581 2.05h3.041c-.437-3.064-3.018-4.516-5.622-4.516-3.709 0-6.22 2.72-6.22 6.497 0 3.756 2.373 6.475 6.082 6.475 2.58 0 5.138-1.129 5.875-4.517h-3.04c-.438 1.475-1.568 2.051-2.673 2.051ZM100.483 14.968h-3.571l-4.516 4.977v-9.286h-3.179v16.704h3.179v-3.732l1.521-1.636 3.249 5.368h3.571l-4.7-7.649 4.446-4.746zM107.002 10.66h-4.953v16.703h4.953c5.3 0 9.286-1.728 9.286-8.363 0-6.636-3.986-8.34-9.286-8.34Zm-.138 14.123h-1.52V13.24h1.52c3.041 0 6.014.76 6.014 5.76 0 5.045-2.973 5.783-6.014 5.783ZM129.28 18.54c.853-.554 1.89-1.96 1.89-3.526 0-3.433-3.157-4.355-6.083-4.355h-6.497v16.704h6.773c3.434 0 6.405-1.336 6.405-4.93 0-2.304-1.198-3.272-2.488-3.894Zm-7.395-5.3h3.409c1.544 0 2.49.783 2.49 2.096 0 1.475-.923 2.212-2.49 2.212h-3.41V13.24Zm3.64 11.543h-3.64v-4.747h3.502c2.05 0 3.018.83 3.018 2.397 0 1.544-.945 2.35-2.88 2.35Z' class='st0'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center left;
	width: 131.77px;
	height: 70px;
	pointer-events: none;
}

.ducklake_logo,
#ducklake_logo{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' version='1.1' viewBox='0 0 153.114 38'%3E%3Cdefs%3E%3Cstyle%3E.st0%7Bfill:%231d1d1b%7D%3C/style%3E%3C/defs%3E%3Cpath d='M70.327 22.083c0 1.684-.475 3.093-2.245 3.093s-2.246-1.409-2.246-3.093v-7.168h-3.195v7.859c0 3.066 2.461 4.853 5.441 4.853s5.441-1.787 5.441-4.853v-7.859h-3.195v7.168ZM51.455 10.62h-4.953v16.705h4.953c5.3 0 9.286-1.729 9.286-8.364s-3.986-8.341-9.286-8.341Zm-.137 14.124h-1.521V13.2h1.521c3.041 0 6.014.76 6.014 5.76 0 5.045-2.973 5.784-6.014 5.784ZM81.671 25.158c-1.751 0-2.995-1.451-2.995-4.055 0-2.581 1.313-3.986 2.973-3.986 1.221 0 2.327.853 2.58 2.051h3.041c-.438-3.064-3.018-4.516-5.621-4.516-3.71 0-6.222 2.719-6.222 6.498 0 3.756 2.373 6.475 6.083 6.475 2.581 0 5.138-1.129 5.875-4.517h-3.041c-.438 1.475-1.566 2.051-2.673 2.051ZM100.517 14.928h-3.571l-4.517 4.977V10.62H89.25v16.704h3.179v-3.732l1.521-1.636 3.249 5.368h3.571l-4.7-7.649 4.447-4.747zM105.376 10.62h-3.295v16.704h11.428v-2.673h-8.133V10.62zM123.07 16.518c-.668-1.175-1.936-1.866-3.503-1.866-3.018 0-5.46 2.581-5.46 6.474 0 3.963 2.511 6.498 5.46 6.498 1.291 0 2.696-.484 3.503-1.866v1.566h3.18V14.928h-3.18v1.59Zm-2.788 8.664c-1.659 0-2.834-1.613-2.834-4.032s1.175-4.055 2.834-4.055c1.751 0 2.903 1.543 2.903 4.032 0 2.558-1.152 4.056-2.903 4.056ZM140.347 14.928h-3.571l-4.516 4.977V10.62h-3.18v16.704h3.18v-3.732l1.521-1.636 3.249 5.368h3.571l-4.7-7.649 4.446-4.747zM147.096 25.158c-1.521 0-2.949-1.037-3.133-3.156h9.146c.115-4.378-2.258-7.35-6.082-7.35-3.664 0-6.222 2.742-6.222 6.428 0 3.571 2.327 6.544 6.313 6.544 3.387 0 5.185-2.051 5.853-3.895h-3.272c-.645 1.083-1.612 1.429-2.604 1.429Zm-.092-8.179c1.336 0 2.811.737 2.88 2.834h-5.875c.253-2.097 1.797-2.834 2.995-2.834Z' class='st0'/%3E%3Cpath d='M19 0C8.507 0 0 8.507 0 19s8.507 19 19 19 19-8.507 19-19S29.493 0 19 0Z' style='fill:%231a1a1a'/%3E%3Cpath d='M16.603 9.608a9.308 9.308 0 0 1 8.075 4.62h1.727c2.375 0 4.361 1.9 4.361 4.318 0 2.375-1.943 4.361-4.361 4.361h-1.252a9.324 9.324 0 0 1-8.161 5.484h-.864c-4.966-.259-8.895-4.361-8.895-9.37 0-5.182 4.189-9.414 9.37-9.414Zm0 2.85c-3.584 0-6.52 2.936-6.52 6.52a6.514 6.514 0 0 0 6.52 6.52c2.893 0 5.355-1.9 6.218-4.491l.302-.993h3.282c.777 0 1.468-.691 1.468-1.468s-.648-1.468-1.468-1.468h-3.498l-.389-.82c-1.036-2.245-3.282-3.8-5.916-3.8Z' style='fill:%232eafff;fill-rule:evenodd'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center left;
	width: 153.11px;
	height: 70px;
	pointer-events: none;
}

.duckdblabs_logo,
#duckdblabs_logo{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' version='1.1' viewBox='0 0 187.823 38'%3E%3Cdefs%3E%3Cstyle%3E.st1%7Bfill:%231d1d1b%7D%3C/style%3E%3C/defs%3E%3Cpath d='M19 38C8.507 38 0 29.493 0 19S8.464 0 19 0s19 8.507 19 19-8.507 19-19 19Z' style='fill:%23ff6900'/%3E%3Cpath d='M31.415 19c0-4.361-3.54-7.86-7.86-7.86s-7.858 3.542-7.858 7.86 3.54 7.86 7.859 7.86 7.859-3.542 7.859-7.86ZM9.414 21.828h3.735v-5.656H9.414a2.828 2.828 0 0 0 0 5.657ZM70.327 22.083c0 1.685-.475 3.094-2.245 3.094s-2.245-1.41-2.245-3.094v-7.168H62.64v7.86c0 3.065 2.461 4.853 5.441 4.853s5.44-1.788 5.44-4.854v-7.859h-3.195v7.168ZM51.456 10.62h-4.954v16.704h4.954c5.3 0 9.286-1.728 9.286-8.364 0-6.635-3.987-8.34-9.286-8.34Zm-.138 14.124h-1.522V13.2h1.522c3.04 0 6.014.76 6.014 5.76 0 5.046-2.973 5.784-6.014 5.784ZM81.675 25.158c-1.75 0-2.995-1.451-2.995-4.054 0-2.582 1.314-3.987 2.972-3.987 1.222 0 2.327.853 2.58 2.051h3.042c-.438-3.064-3.019-4.516-5.622-4.516-3.71 0-6.22 2.719-6.22 6.497 0 3.756 2.372 6.475 6.082 6.475 2.58 0 5.138-1.129 5.875-4.517h-3.04c-.438 1.475-1.568 2.051-2.674 2.051ZM100.52 14.928h-3.571l-4.516 4.977V10.62h-3.18v16.704h3.18v-3.732l1.521-1.636 3.249 5.368h3.571l-4.7-7.649 4.446-4.747zM107.039 10.62h-4.954v16.704h4.954c5.3 0 9.286-1.728 9.286-8.364 0-6.635-3.987-8.34-9.286-8.34Zm-.138 14.124h-1.52V13.2h1.52c3.04 0 6.014.76 6.014 5.76 0 5.046-2.973 5.784-6.014 5.784ZM129.317 18.5c.852-.553 1.89-1.959 1.89-3.525 0-3.433-3.158-4.355-6.083-4.355h-6.498v16.704h6.774c3.433 0 6.405-1.336 6.405-4.93 0-2.304-1.198-3.272-2.488-3.894Zm-7.396-5.3h3.41c1.543 0 2.489.783 2.489 2.097 0 1.474-.922 2.212-2.49 2.212h-3.409V13.2Zm3.64 11.544h-3.64v-4.747h3.502c2.051 0 3.019.83 3.019 2.397 0 1.544-.945 2.35-2.881 2.35ZM141.794 10.62h-1.544v16.704h10.392v-1.428h-8.848V10.62zM160.478 17.071c-.853-1.498-2.35-2.35-4.193-2.35-2.858 0-5.161 2.327-5.161 6.45 0 4.126 2.303 6.453 5.16 6.453 1.844 0 3.341-.853 4.194-2.327v2.027h1.451V14.928h-1.451v2.143Zm-3.894 9.262c-2.304 0-3.917-1.866-3.917-5.161 0-3.295 1.613-5.16 3.917-5.16 1.913 0 4.01 1.474 4.01 5.16s-2.097 5.161-4.01 5.161ZM170.982 14.72c-1.843 0-3.295.853-4.193 2.351V10.62h-1.428v16.704h1.428v-2.027c.898 1.474 2.35 2.327 4.193 2.327 2.857 0 5.184-2.327 5.184-6.452 0-4.124-2.327-6.451-5.184-6.451Zm-.299 11.613c-1.866 0-3.986-1.475-3.986-5.161 0-3.686 2.12-5.16 3.986-5.16 2.304 0 3.94 1.865 3.94 5.16s-1.636 5.161-3.94 5.161ZM183.538 20.435l-1.752-.323c-1.382-.253-2.328-.898-2.328-2.12 0-1.497 1.798-2.027 3.158-2.027 1.75 0 3.11.876 3.41 2.35h1.497c-.299-1.958-2.097-3.617-4.77-3.617-2.787 0-4.746 1.451-4.746 3.41s1.59 2.949 3.365 3.318l1.935.369c1.682.322 3.065.829 3.065 2.28 0 1.66-1.867 2.281-3.365 2.281-1.89 0-3.502-.898-3.756-2.834h-1.497c.369 2.834 2.58 4.102 5.138 4.102 2.695 0 4.93-1.313 4.93-3.78 0-2.349-2.257-3.04-4.284-3.41Z' class='st1'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center left;
	width: 187.82px;
	height: 70px;
	pointer-events: none;
}

.button{
	@include button;
}
.textbutton{
	@include textbutton;
}
