src/static/scripts/components/global/search/_search.scss
@use "../../../../style/vars";
@use "../../../../style/shadow";

ph-search {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
	background: vars.$background-el1;
	border: 1px solid vars.$border-heavy-color;
	border-radius: 1.3rem;
	width: 20rem;
	@media (max-width: vars.$smaller-screen-max-width) {
		width: 12.5rem;
	}
	height: 2.6rem;
	padding-left: 1rem;
	transition: width .25s ease;

	> input {
		flex-grow: 1;
		min-width: 0;
		margin-left: .125rem;
	}

	> button {
		width: 2rem;
		min-width: 2rem;
		height: 2rem;
		min-height: 2rem;

		img {
			width: 100%;
			height: 100%;
			opacity: .5;
			transition: opacity .25s ease;

			&:where(:hover, :focus-visible) {
				opacity: 1;
			}
		}

		&:last-of-type {
			margin-right: .3rem;
		}
	}

	> .modeButton {
		user-select: none;
		padding: 0 .125rem;
		position: relative;
		opacity: .5;
		transition: all .25s ease;
		--dim: 1.5rem;

		&.checked {
			color: vars.$primary;
			opacity: 1;
		}

		&::before {
			transform: translateX(-50%) translateY(-40%);
		}
	}

	.searchDropdown {
		position: absolute;
		bottom: 0;
		left: 0;
		min-width: 100%;
		transform: translateY(calc(100% + .5rem)) scale(.75);
		transform-origin: top center;
		background: vars.$background-el1;
		padding: 1rem;
		border: 1px solid vars.$border-color;
		border-radius: 1.3rem;
		display: flex;
		opacity: 0;
		visibility: hidden;
		transition: all .25s ease;
		@extend %shadow-sharp;

		> .resultsWrapper {
			position: relative;
			width: 60%;
			padding-right: 1rem;
			margin-right: 1rem;
			word-break: break-all;

			&::before {		// loading icon
				content: "";
				position: absolute;
				right: .5rem;
				top: 0;
				width: 3rem;
				height: 3rem;
				background-image: url("/img/loading3.svg");
				background-repeat: no-repeat;
				background-size: contain;
				pointer-events: none;
				opacity: 0;
				transition: opacity .25s ease;
			}

			&.loading::before {
				opacity: 1;
			}

			&::after {		// separator
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				width: 1px;
				height: 100%;
				background: vars.$divider-color;
			}

			> * {
				display: block;
				line-height: 1.8em;
			}

			> .subreddit + .user {
				position: relative;
				margin-top: .8rem;

				&::before {
					content: "";
					position: absolute;
					top: -.4rem;
					left: 1rem;
					width: calc(100% - 2rem);
					height: 1px;
					background: vars.$divider-color;
				}
			}

			.feedLink.customLink + .feedLink:not(.customLink) {
				border-top: 1px solid vars.$divider-color;
				padding-top: .5rem;
				margin-top: .5rem;
			}
		}

		> .expandedOptions {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: .5rem;
			flex-grow: 1;

			> div {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.checkbox + label {
					width: 1.3em;
					height: 1.3em;
					min-width: 1.3em;
					min-height: 1.3em;
					max-width: 1.3em;
					max-height: 1.3em;
				}

				label[for=limitToSubreddit] {
					max-width: 12rem;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.accessibilitySpacer {
			position: absolute;
			top: 0;
			left: 0;
			width: calc(100% + 10rem);
			height: calc(100% + 5rem);
			transform: translateX(-50%);
			margin-left: 50%;

			~ * {
				position: relative;
			}
		}
	}

	.searchCollapser {
		img {
			transform: rotate(180deg);
		}
	}

	&.expanded {
		width: 30rem;

		> .searchDropdown {
			transform: translateY(calc(100% + 0.5rem)) scale(1);
			opacity: 1;
			visibility: visible;
		}
	}

	&.collapsed {
		width: min-content;
		padding: 0;

		> :not(.searchCollapser) {
			display: none;
		}

		.searchCollapser img {
			transform: rotate(0);
		}
	}

	&:not(.collapsed) {
		.searchCollapser {
			@media (min-width: vars.$smaller-screen-max-width) {
				display: none;
			}
		}
	}
}
