// 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';

.header__menu-rwd {
	display: none;
	height: calc( 100% - #{ globals.$u-top-main } );
	overflow-x: hidden;
	background: color.u-color( 'background-bright' );

	a {
		color: color.u-color( 'text-invert' );
		display: block;
		width: 100%;

		&:hover{
			text-decoration: none;
		}

		/* We need to hide wrongly generated links by umberto. */
		&:empty {
			display: none;
		}
	}

	/* 1st level of tree. */
	ul.header__menu-rwd__projects {

		/* Make different appearance of project names (CK5, CK4, Letters etc.). */
		li[data-project] {
			border-bottom: 1px solid color.u-color( 'separator' );

			> a {
				padding: spacing.u-spacing( -1 );
				color: color.u-color( 'text' );
				background: color.u-color( 'background-dark' );
				font-size: font.u-font-size( 1 );
				font-weight: bold;
			}
		}

		/* 2nd level of tree. */
		ul.header__menu-rwd__projects-pages {
			background: color.u-color( 'background-bright' );
			padding-bottom: 0;

			/* Style elements like Builds, Framework, Examples, API, Features. */
			li[data-group] {
				border-bottom: 1px solid color.u-color( 'separator' );

				> a {
					padding: spacing.u-spacing( -1 );
					margin-left: spacing.u-spacing( 0 );
					text-transform: uppercase;
				}
			}
		}

		/* 3rd level of tree. */
		ul.header__menu-rwd__projects-subpages {
			margin-top: -1 * spacing.u-spacing( -3 );
			margin-bottom: spacing.u-spacing( -1 );
		}

		/* Highlight active and focused item. */
		.tree__item__wrapper--active,
		.tree__item__wrapper:focus,
		.tree__item__wrapper:active {
			font-weight: bold;
			background-color: color.u-color( 'separator' );
		}

		/* Disable active effect during scrolling on the mobile. */
		.tree__item__wrapper:hover {
			font-weight: normal;
			background-color: transparent;
		}

		/* Style API tree differently. */
		.api-tree {
			padding-bottom: 0;
		}
	}

}
