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

@use 'helpers/color';
@use 'helpers/font';
@use 'helpers/globals';
@use 'helpers/spacing';

.tree.api-tree {
	@include font.u-font-mono;

	@include globals.u-responsive-tablet {
		@include globals.levels( 3, 1 );
	}

	/* Generate styles for tree levels on <960px devices differently.
	We need to change it to properly display `::before` arrow dropdown. */

	[data-private], [data-protected] {
		display: none;

		@include globals.u-responsive-tablet {
			display: block;
		}
	}

	&.api-tree--show-private {
		[data-private], [data-protected] {
			display: block;
		}
	}

	.tree__item__text {
		padding-top: 0;
		padding-bottom: 0;

		@include globals.u-responsive-tablet {
			padding: spacing.u-spacing( -3 ) 0;
		}
	}

	li::before {
		top: .4em;

		@include globals.u-responsive-tablet {
			top: spacing.u-spacing( -1 );
			margin-left: -10px !important;
		}
	}
}

/* Public/Inherited/Mixed/Protected/Private/Deprecated Items filter. */
.api-tree__filter {
	text-align: center;
	left: 0;
	width: globals.$u-sidebar-width;
	border-right: 1px solid color.u-color( 'background-hue' );

	@include globals.u-sticky-filter;
	@include globals.u-unselectable;

	@include globals.u-responsive-tablet {
		display: none;
	}

	input {
		display: none;
	}

	// TODO: Magic numbers below...
	label {
		@include globals.u-micro-header;
		padding-right: 65px;
	}

	input + label {
		position: relative;
		cursor: pointer;
		text-align: left;

		&::before {
			color: #fff;
			font-size: .85em;
			padding-left: 27px;
			line-height: 22px;
			content: "No";
			display: inline-block;
			width: 50px;
			height: 20px;
			background: color.u-color( 'primary' );
			position: absolute;
			right: 0;
			top: -4px;
			border-radius: 0px;
		}

		&::after {
			content: "";
			display: block;
			width: 16px;
			height: 16px;
			background: #fff;
			position: absolute;
			right: 32px;
			top: -2px;
			border-radius: 0px;
		}
	}

	input:checked + label {
		&::before {
			content: "Yes";
			padding-left: 7px;
			background: color.u-color( 'selected' );
		}

		&::after {
			right: 2px;
		}
	}
}
