@import "~scss/_mixins";

.popups {
	.popupSettingsOnboarding {
		.innerWrap { width: 684px; height: auto; max-height: calc(100% - 48px); overflow: visible; }

		@media (max-width: 990px) {
			.innerWrap { width: calc(100% - 32px); left: 16px; margin-left: 0px !important; }
		}

		.content { height: 100%; }


		.content > .mainSides { display: flex; height: 100%; }
		.content > .mainSides {
			> .side { position: relative; height: 100%; }

			> .side.right { width: 100%; padding: 44px 54px; overflow-x: hidden; overflow-y: auto; }
			> .side.right {
				.title { @include text-header1; font-weight: 700; margin: 0px 0px 32px 0px; }

				.error { margin: 8px 0px 0px 0px; }

				.label.small, .label.section, .label.grey { color: var(--color-text-secondary); }
				.label.small, .label.section { @include text-small; }
				.label.section { margin: 30px 0px 4px 0px; }
				.label.red { color: var(--color-red); }

				.name { width: 100%; }
				.name {
					.label { margin: 0px 0px 6px 0px; }
					.input { @include text-header2; padding: 0px; }
				}

				.actionItems { border: 1px solid var(--color-shape-secondary); border-radius: 12px; margin: 0px 0px 35px 0px; }
				.actionItems {
					> .item { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;  border-bottom: 1px solid var(--color-shape-secondary); }
					> .item:last-child { border-bottom: 0; }
					> .item.red { color: var(--color-red); }
				}
				.actionItems:last-child { margin-bottom: 0px; }

				.select {
					background: none; border: solid 1px var(--color-shape-secondary); font-weight: 400; text-decoration: none;
					min-height: 28px; padding: 3px 26px 3px 12px; border-radius: 8px; padding-left: 10px; max-width: 250px;
				}
				.select:hover { background: var(--color-shape-highlight-medium); }
				.select {
					.item { border-bottom: 0; color: var(--color-text-primary); }
					.item {
						.iconObject { display: none; }
						.name { line-height: 20px; }
					}
					.icon.arrow { right: 3px !important; }
					.descr { display: none; }
				}
				.buttons { display: flex; flex-direction: row; gap: 0px 8px; }
			}
		}
	}

	.popupSpaceInfo {
		.wrapper { padding: 16px; }
		.sectionContent { border-radius: 12px; border: 1px solid var(--color-shape-secondary); overflow: hidden; }
		.sectionContent {
			> .item { padding: 16px; border-bottom: 1px solid var(--color-shape-secondary); }
			> .item:last-child { border-bottom: 0; }
			> .item.red {
				.title { color: var(--color-red); }
			}

			> .item {
				.sides { display: flex; justify-content: space-between; align-items: center; gap: 0px 16px; }
				.sides:not(.alignTop) { align-items: center; }
				.sides {
					.side { width: unset; background: unset; padding: unset; }
					.side.left { flex-grow: 1; }
					.side.right { flex-shrink: 0; }
				}

				.title { @include text-header3; margin-bottom: 12px; }
				.label { @include text-small; color: var(--color-text-secondary); }

				.button { max-width: 200px; }
				.button {
					.txt { @include text-overflow-nw; line-height: unset; }
				}
				.icon { width: 22px; height: 22px; margin-right: 2px; opacity: 0; transition: $transitionAllCommon; background-image: url('~img/icon/menu/action/copy0.svg'); }
			}
			> .item:hover {
				.icon { opacity: 1; }
			}
		}
	}
}
