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

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

.main__content-inner {
	.hidden-loading {
		display: none;
	}

	.api-subheader {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;

		&.hidden-loading {
			display: none;
		}

		@include globals.u-responsive-mobile {
			flex-wrap: wrap;
		}

		@include globals.u-responsive-mobile {
			&__badges {
				width: 100%;
			}
		}

		&__navigation {
			@include font.u-font-mono;

			@include globals.u-responsive-mobile {
				margin-left: auto;
			}

			ul {
				margin: 0;
			}

			&-category {
				cursor: pointer;
				padding: 5px;
				border: 1px solid transparent;
				list-style: none;
				display: inline-block;
				position: relative;
				vertical-align: middle;

				&::before {
					content: '';
					margin-right: 5px;
					position: relative;
					display: inline-block;
				}

				&:hover {
					border-color: #ccc;

					ul {
						display: flex;
					}
				}

				// Handle empty category.
				&--empty {
					display: none;
				}
			}

			// its <ul> element.
			&-dropdown {
				display: none;
				flex-wrap: wrap;
				flex-basis: auto;
				flex-grow: 1;

				border: 1px solid #ccc;
				background-color: hsl(0, 0%, 98%);
				overflow-y: auto;
				overflow-x: hidden;
				position: absolute;

				// Let's align it to parent <li>.
				right: -1px;
				top: 100%;

				margin: 0;
				padding: 20px;

				min-width: 500px;
				max-height: 50vh;

				// Render the API dropdowns on top of the "See source" button.
				z-index: 2;

				li {
					width: 50%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 0 10px;
					border: 0;

					a {
						/* See #563. */
						display: block;
					}
				}

				&--small {
					/* Because of moved dropdown to the right: -1px. */
					min-width: calc(100% + 2px);

					li {
						width: 100%;
					}
				}

				// if more than 40 elements
				&--big {
					min-width: 500px;

					li {
						width: 50%;
					}
				}

				// if more than 100 elements
				&--huge {
					min-width: 700px;

					li {
						width: 33%;
					}
				}

				&--hidden {
					display: none;
				}
			}

			// We need to set positions manually (top property), because of different proportions of <svg>s.
			li[data-type="properties"]::before {
				top: -1px;
				content: url( ../img/header-info-properties.svg );
			}

			li[data-type="methods"]::before {
				top: 1px;
				content: url( ../img/header-info-methods.svg );
			}

			li[data-type="events"]::before {
				top: 0px;
				content: url( ../img/header-info-events.svg );
			}

			li[data-type="configs"]::before {
				top: 3px;
				content: url( ../img/header-info-configs.svg );
			}
		}
	}
}
