// 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';
@use 'sass:math';

nav.secondary-navigation {
	@include font.u-baseline-margin( 0 );

	@include globals.u-responsive-wide {
		padding-top: spacing.u-spacing( 4 ) * 2;
		padding-right: spacing.u-spacing( 4 );
		position: fixed;
		top: globals.$u-top-height;
		right: 0;
		height: calc( 100vh - #{globals.$u-top-height} - 50px );
		overflow-y: auto;
		width: globals.$u-sidebar-width;
		background-color: color.u-color( 'background-bright' );
	}

	@include globals.u-responsive-narrow {
		padding: spacing.u-spacing( 2 );
		background-color: color.u-color( 'background-hue-light' );
	}

	/* Main navigation title. */
	h3 {
		margin-bottom: spacing.u-spacing( 0 );
		padding-top: 0;
	}

	a {
		display: block;
		font-size: 14px;
		color: color.u-color( 'text-gray' );
		position: relative;
		transition: 200ms ease color;
		margin: 0;
		padding: spacing.u-spacing( -3 ) 0;
		line-height: 1.4;

		/* Styles for active item dot. */
		&::before {
			content: '';
			position: absolute;
			width: 7px;
			height: 7px;
			left: -19px;
			top: 50%;
			transform: translateY( -50% );
			background: transparent;
			opacity: 0;
			border-radius: 50%;
			transition: 200ms ease opacity;

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

		&:hover {
			color: color.u-color( 'link' );
			text-decoration: none;

			&::before{
				background: color.u-color( 'text-gray' );
				opacity: 1;
			}
		}

		&.secondary-navigation__current-position {
			color: color.u-color( 'link' );
			-webkit-text-stroke-width: thin;

			&::before {
				opacity: 1;
				background: color.u-color( 'link' );
			}
		}
	}

	/* Special styles for parent list. */
	> ol {
		border-left: 1px solid #eee;
		padding-left: 1em;
		margin-left: spacing.u-spacing( -3 );
		padding-top: 0;

		@include globals.u-responsive-narrow {
			border-left: 0;
			padding-left: 0;
		}
	}

	ol {
	  	margin-bottom: 0;
		list-style: none;

		ol {
			margin: 0;
			margin-left: spacing.u-spacing( 0 );

			// We need to move dot to the left, because of left margin of nested list.
			a.secondary-navigation__current-position::before,
			a:hover::before {
				left: -34px;
			}

			ol {
				// We need to move dot to the left, because of left margin of nested list.
				a.secondary-navigation__current-position::before,
				a:hover::before {
					left: -49px;
				}
			}
		}
	}
}


nav.api-secondary-navigation {
	@include font.u-baseline-margin( 0 );
	background: color.u-color( 'background-hue-light' );
	padding-left: 2*spacing.u-spacing( 0 );
	padding-right: spacing.u-spacing( 0 );
	padding-bottom: spacing.u-spacing( 4 );

	@include globals.u-responsive-narrow {
		padding-top: spacing.u-spacing( 4 );
	}

	@include globals.u-responsive-wide {
		position: fixed;
		top: globals.$u-top-height;
		right: 0;
		height: calc( 100vh - #{globals.$u-top-height} - 50px );
		overflow-y: auto;
		width: globals.$u-sidebar-width;
		background-color: color.u-color( 'background-bright' );
		border-left: 1px solid color.u-color( 'background-hue' );
		padding-top: spacing.u-spacing( 4 ) * 2;
	}

	h3 {
		margin-bottom: math.div( spacing.u-spacing( 0 ), 3 );
		padding-top: 0;
	}
}
