@use 'sass:map';
@use '../../base/maps/tokens' as *;
@use '../../base/mixins/typography' as font;
@use '../../base/mixins/glass' as glass;
@use '../../base/mixins/breakpoints' as break;
@use '../../base/functions' as *;
@use '../../components/molecules/cards/card' as *;

.glossary {
	&-highlight {
		background-color: with-opacity(var(--action-tertiary), 30);
	}

	&-nav {
		@extend .card;
		@include glass.bg-glass;

		padding: var(--padding-small);
		box-shadow: var(--shadow-outline);
		border-color: transparent;
		overflow: visible;

		&-wrapper {
			margin: auto auto var(--padding-medium) auto;
			width: 100%;
			position: sticky;
			top: var(--padding-huge);
			z-index: 99;
		}
	}

	&-search {
		position: relative;

		&-results {
			padding: var(--padding-extra-small);

			&-wrapper {
				max-height: 30vh;
				width: 100%;
				margin-top: var(--padding-extra-small);
				position: absolute;
				border-width: 1px;
				border-style: solid;
				border-radius: var(--radius-small);
				box-shadow: var(--shadow-outline);
				overflow-y: scroll;
				z-index: 100;
				background-color: var(--default);
				border-color: with-opacity(var(--ui-stroke), 30);
			}

			&-item {
				padding: var(--padding-extra-small);
				display: flex;
				flex-direction: column;
				gap: var(--padding-extra-small);
				border-radius: var(--radius-small);
				cursor: pointer;

				&:hover {
					background-color: with-opacity(var(--action), 10);
				}
			}
		}

		&-alphabet {
			margin-top: var(--padding-extra-small);
			display: flex;
			justify-content: center;

			&-wrapper {
				@include break.max-tablet {
					width: 100%;
					overflow-x: scroll;
				}
			}

			&-letter {
				padding: var(--padding-extra-small);
				cursor: pointer;
				transition: background-color var(--transition-fast);

				@include font.get-typography(subhead);

				color: var(--ui-body);

				&:hover {
					color: var(--action);
				}
			}

			@include break.max-tablet {
				justify-content: start;
			}
		}

		.input {
			background-color: var(--default);
		}
	}
}