src/static/scripts/components/misc/multiCreateOrEdit/_multiCreateOrEdit.scss
@use "../../../../style/vars";

.multiCreateOrEdit {
	--width: min(90vw, 35rem);
	--height: 25rem;

	.modalContent {
		display: flex;
		flex-direction: column;
		gap: .5rem;
		overflow-x: hidden;

		input {
			background: vars.$background-el2;
			padding: .25rem .5rem;
			border: 1px solid vars.$border-color;
			border-radius: 1rem;
		}

		.bottomBar {
			display: flex;
			margin-top: auto;

			.visibilitySelector {
				display: flex;

				button {
					background: vars.$switcher-bg;
					padding: 0 .5rem;
					transition: all .25s ease;
					display: flex;
					align-items: center;

					img {
						height: 1.25rem;
						width: 1.25rem;
						margin-right: .25rem;
					}

					&:first-child {
						border-top-left-radius: .5rem;
						border-bottom-left-radius: .5rem;
					}

					&:last-child {
						border-top-right-radius: .5rem;
						border-bottom-right-radius: .5rem;
					}

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

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

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

			.submit {
				margin-left: auto;
			}
		}
	}
}