// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
// For licensing, see LICENSE.md.

@use 'spacing';
@use 'color';

$u-top-main: 55px;
$u-top-sub: 45px;
$u-top-height: $u-top-main + $u-top-sub;
$u-footer-height: 40px;
$u-sidebar-width: 340px;
$u-content-max-width: 760px;
$u-content-md-width: 660px;
$u-content-min-width: 590px;
$u-content-margin: 50px;
$u-grid-unit: 20px;

$u-responsive-mobile: 640px;
$u-responsive-tablet: 960px;
$u-responsive-limit: 1360px;
$u-responsive-md-limit: 1440px;
$u-responsive-wide-limit: 1600px;

$u-top-icon-width: 30px;

@mixin u-unselectable {
	user-select: none;
}

@mixin u-v-center {
	top: 50%;
	transform: translateY( -50% );
}

@mixin u-box {
	background: color.u-color( 'background-bright' );
}

@mixin u-responsive-mobile() {
	@media only screen and (max-width: $u-responsive-mobile) {
		@content;
	}
}

@mixin u-responsive-tablet() {
	@media only screen and (max-width: $u-responsive-tablet) {
		@content;
	}
}

@mixin u-responsive-tablet-plus() {
	@media only screen and (min-width: $u-responsive-tablet) {
		@content;
	}
}

@mixin u-responsive-narrow() {
	@media only screen and (max-width: $u-responsive-limit) {
		@content;
	}
}

@mixin u-responsive-wide() {
	@media only screen and (min-width: $u-responsive-limit) {
		@content;
	}
}

@mixin u-responsive-wide-md() {
	@media only screen and (min-width: $u-responsive-md-limit) {
		@content;
	}
}

@mixin u-responsive-wide-plus() {
	@media only screen and (min-width: $u-responsive-wide-limit) {
		@content;
	}
}

@mixin u-icon-on-top {
	&::before {
		width: $u-top-icon-width;
		height: $u-top-icon-width;
		display: block;

		position: absolute;
		top: -$u-top-icon-width/2;
		left: 50%;
		margin-left: -$u-top-icon-width/2;
	}
}

@mixin u-sticky-filter {
	position: fixed;
	z-index: 20;
	bottom: 0px;
	margin-bottom: 0;
	padding: spacing.u-spacing( 0 ) spacing.u-spacing( 2 );
	border-top: 1px solid color.u-color( 'background-hue' );
	background: color.u-color( 'background-bright' );
	height: 50px;
	border-top: 1px solid #eee;
	border-left: 0;
}

@mixin u-micro-header {
	text-transform: uppercase;
	font-size: .85em;
	text-transform: uppercase;
	font-weight: 600;
	color: color.u-color( 'text', 20% );
}

@mixin levels( $depth, $spacing ) {
	@if ( $depth < 8 ) {
		li {
			&::before {
				left: calc( #{ $depth * spacing.u-spacing( $spacing ) } - 8px );
			}

			.tree__item__text {
				margin-left: ( $depth + 1.5 ) * spacing.u-spacing( $spacing );
			}

			@include levels( $depth + 1, $spacing );
		}
	}
}
