src/static/scripts/components/post/submit/_submitPostForm.scss
@use "../../../../style/vars";

.submitPost {
	@extend %view-width-M;
	background: vars.$background-el1;
	border: 1px solid vars.$border-color;
	border-radius: 1rem;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	height: max-content;

	.phInput {
		height: 2rem;
		line-height: 2rem;
		display: flex;
		align-items: center;

		> input {
			flex-grow: 1;
		}

		&.sub {
			position: relative;
			max-width: 18rem;

			.validStatus {
				height: 1.5rem;
			}

			.subInfoButtonWrapper {
				height: 1.1rem;
				--dim: 1.75rem;
			}
		}
	}

	.subSubmitText {
		code {
			max-width: 100%;
			word-break: break-word;
		}
	}

	.bottomBar {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 1rem;

		> .group {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			> * {
				margin: .25rem;
			}
		}

		.flairSelectorWrapper {
			.dropDownButton, .dropDownEntry {
				border-color: vars.$border-color !important;
				background-color: vars.$background-el2 !important;
			}
		}

		.specialButton {
			height: 2rem;
			border-radius: 1rem;
			border: 2px solid var(--special-color);
			padding: 0 1.25rem;
			transition: all .25s ease;

			&:not(.selected):hover {
				color: var(--special-color);
			}

			&.selected {
				background: var(--special-color);
				color: vars.$text-on-primary;
			}

			&.nsfw {
				--special-color: darkred;
			}

			&.spoiler {
				--special-color: orange;
			}
		}

		.notificationButton {
			width: 1.8rem;
			height: 1.8rem;
			opacity: .3;
			transition: all .25s ease;

			&.selected {
				opacity: 1;
			}

			&:hover:not(.selected) {
				opacity: .75;
			}

			> img {
				height: 1.8rem;
			}
		}
	}

	.linkTypeButton {
		height: 1.25rem;
		width: 1.25rem;
		--dim: 2rem;
		margin: auto .25rem;
		opacity: .5;
		transition: opacity .25s ease;

		img {
			height: 1.25rem;
		}

		&:hover {
			opacity: .75;
		}

		&.selected {
			opacity: .95;
		}
	}

	.button.submit {
		&:disabled {
			filter: contrast(.3);
			opacity: .6;
			cursor: default;
		}
	}

	.el2 {
		background: vars.$background-el2;
		border: 1px solid vars.$border-color;
		margin: .5rem 0;
		padding: 0 .75rem;
	}

	.markdownForm textarea {
		padding: .5rem;
		min-height: 10rem;
		width: 100%;
		max-width: unset;
	}

	.roundedL {
		border-radius: 1rem;
	}

	.roundedM {
		border-radius: 0.5rem;
	}

	.button {
		background: vars.$background;
	}

	.sectionSelection {
		width: calc(100% + 2rem);
		margin: 1rem 0 1rem -1rem;
		height: 3rem;
		font-size: 1.24rem;
		display: flex;
		padding: 0;
		border-right-width: 0;
		border-left-width: 0;

		> button {
			line-height: 3rem;
			flex-grow: 1;
			transition: background-color .25s ease;

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

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

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