src/static/scripts/components/global/photonSettings/_photonSettings.scss
@use "../../../../style/vars";
@use "../../../../style/shadow";
@use "./filtersSetting";

.photonSettings {
	--width: min(95vw, 50rem) !important;
	--height: 65vh !important;

	> div {
		padding: 0 !important;
		@extend %shadow-dreamy;
	}

	.modalContent {
		overflow: initial !important;
		display: flex;
		$sidebar-width: 11rem;
		$sidebar-min-width: 3.5rem;


		.save.button {
			background: vars.$background;
		}

		.sectionsSelection {
			display: flex;
			flex-direction: column;
			width: $sidebar-width;
			background: vars.$switcher-bg;
			height: 100%;
			overflow-y: auto;
			overflow-x: hidden;
			border-top-left-radius: vars.$border-radius;
			border-bottom-left-radius: vars.$border-radius;
			border-right: 1px solid vars.$border-color;
			transition: all 0.1s ease;
			position: absolute;

			.sectionEntry {
				display: flex;
				align-items: center;
				padding: 1rem;
				gap: 1rem;
				transition: all .25s;

				&.hamburger {
					@media (min-width: 600px) {
						display: none;
					}
				}

				&.search {
					gap: .4rem;
					padding-right: 0.5rem;
					background: none !important;

					input {
						border-bottom: 1px solid vars.$input-element-bg;
						padding: .25rem .5rem;
						width: 100%;
					}
				}

				&.selected {
					background: vars.$switcher-bg-selected;
				}

				&:hover:not(.selected) {
					background: vars.$switcher-bg-hover;
				}

				&:active:not(.selected) {
					background: vars.$switcher-bg-active;
				}

				.icon {
					height: 1.5rem;
				}

				.name {
					white-space: nowrap;
				}
			}
		}

		.sections {
			padding: 1.75rem;
			width: 100%;
			height: 100%;
			margin-left: $sidebar-width;
			background-image: linear-gradient(to right, #00000054 0, transparent 1.5rem);
			transition: all 0.1s ease;

			@media (max-width: 600px) {
				padding: 0.5rem;
			}

			.section {
				overflow-x: hidden;
				overflow-y: auto;
				display: flex;
				flex-direction: column;
				min-height: 100%;
				max-height: 100%;

				&:not(.selected) {
					display: none;
				}

				.sectionName {
					font-size: 1.5rem;
				}

				.inputWrapper {
					display: flex;
					flex-direction: column;
					gap: .1rem;
					border: 1px solid transparent;
					transition: border .25s ease;
					padding: .5rem 0;

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

						.name {
							font-size: 1.25rem;
						}

						.checkbox + label {
							--size: 1.5rem;
						}

						input:where([type=number], [type=text]) {
							border-bottom: 1px solid vars.$border-heavy-color;
							text-align: right;
							transition: all .25s ease;

							&:hover {
								border-bottom: 1px solid vars.$primary-faint;
							}

							&:focus {
								border-bottom: 1px solid vars.$primary;
							}
						}
					}

					&.number input {
						width: 3rem;
					}

					&.time input {
						width: 5rem;
					}

					&.multiOptions {
						.mainRow {
							flex-direction: column;
							justify-content: flex-start;
							align-items: flex-start;
						}

						.options {
							display: flex;
							width: 100%;
							margin: .5rem 0;

							button {
								background: vars.$switcher-bg;
								transition: all .25s ease;
								flex-grow: 1;
								border: 1px solid transparent;
								min-height: 2.5rem;
								line-break: anywhere;

								&.selected {
									background: vars.$primary-contrast;
									color: vars.$text-on-primary;
								}

								&:not(.selected) {
									border: 1px solid vars.$border-color;

									&:not(:last-child) {
										border-right: 1px solid transparent;
									}
								}

								&:hover:not(.selected) {
									background: vars.$switcher-bg-hover;
								}

								&:active:not(.selected) {
									background: vars.$switcher-bg-active;
								}

								&:first-child {
									border-top-left-radius: vars.$border-radius;
									border-bottom-left-radius: vars.$border-radius;
								}

								&:last-child {
									border-top-right-radius: vars.$border-radius;
									border-bottom-right-radius: vars.$border-radius;
								}
							}
						}
					}

					.bottomRow {
						width: 100%;
						display: flex;

						.description {
							font-size: 0.8rem;
							font-weight: 400;
							max-width: calc(100% - 2rem);
						}

						.resetButton {
							width: 1.5rem;
							height: 1.5rem;
							background-size: cover;
							--dim: 1.75rem;
							margin-right: 0.1rem;
							align-self: center;
							margin-left: auto;

							img {
								transition: .25s ease;
								width: 1.5rem;
								height: 1.5rem;
								opacity: 0;
							}
						}
					}

					&:hover {
						border-top-color: vars.$border-color;
						border-bottom-color: vars.$border-color;

						.resetButton img {
							opacity: 0.5;
						}
					}

				}


			}
		}

		@media (max-width: 600px) {
			&:not(.toggle) {
				.sectionsSelection {
					width: $sidebar-min-width;

					.sectionEntry {
						.name {
							display: none;
						}
					}
				}
			}

			.sections {
				margin-left: $sidebar-min-width;
			}

			&.toggle {
				.sections {
					background-position-x: $sidebar-width - $sidebar-min-width;
				}
			}
		}
	}
}
