@import "~scss/_mixins";

.popups {
	.popup.popupApiCreate {
		.innerWrap { width: 424px; padding: 32px; text-align: center; }

		.title { @include text-header3; margin-bottom: 16px; }

		.iconWrapper { margin: 0px 0px 12px 0px; }
		.iconWrapper {
			.icon { width: 56px; height: 56px; }
			.icon.create { background-image: url('~img/icon/popup/confirm/create.svg'); }
			.icon.success { background-image: url('~img/icon/popup/confirm/success.svg'); }
		}

		.nameWrapper { display: flex; flex-direction: column; gap: 4px 0px; justify-content: flex-start; margin: 0px 0px 16px 0px; text-align: left; }
		.nameWrapper {
			.input, .textarea { font-family: 'Inter'; border: 1px solid var(--color-shape-secondary); border-radius: 6px; }
			.input, .textarea {
				&.isReadonly { background-color: var(--color-shape-tertiary); }
			}

			.textarea { padding: 6px 16px; text-align: center; }
		}

		.buttons { display: flex; flex-direction: column; gap: 8px; }
		.buttons {
			.button { width: 100%; }
			.button.blank:not(:hover):not(.hover) { background-color: var(--color-bg-primary); }
		}
	}
}