.cloud-account-setup-modal {
	background: var(--l1-background);
	color: var(--l1-foreground);

	[data-slot='drawer-title'] {
		color: var(--l1-foreground);
	}

	> div {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	&__content {
		flex: 1;
		overflow-y: auto;
		min-height: 0;
		scrollbar-width: thin;
		padding-right: 16px;

		&::-webkit-scrollbar-thumb {
			background: var(--l1-border);
		}

		&::-webkit-scrollbar-track {
			background: var(--l1-background);
		}

		scrollbar-width: thin;
		scrollbar-color: var(--l3-background) var(--l1-background);
	}

	.cloud-account-setup-prerequisites {
		display: flex;
		flex-direction: column;
		gap: 12px;

		&__title {
			color: var(--l1-foreground);
			font-size: 14px;
			font-weight: 500;
			line-height: 20px;
			letter-spacing: -0.07px;
		}

		&__list {
			display: flex;
			flex-direction: column;
			gap: 8px;
			list-style: none;
			padding: 0;
			margin: 0;
		}

		&__list-item {
			color: var(--l2-foreground);
			font-size: 13px;
			line-height: 18px;
			letter-spacing: -0.06px;

			display: flex;
			align-items: center;
			gap: 16px;

			&-bullet {
				color: var(--primary);
				font-weight: 500;
			}

			&-text {
				display: flex;
				align-items: center;
				gap: 4px;
			}
		}

		&__list-item-highlight {
			color: var(--l1-foreground);
			font-weight: 500;
		}
	}

	.cloud-account-setup-how-it-works-accordion {
		display: flex;
		flex-direction: column;
		margin: 24px 0;

		&__title {
			display: flex;
			align-items: center;

			color: var(--l1-foreground);
			font-size: 14px;
			font-weight: 500;
			line-height: 20px;
			letter-spacing: -0.07px;

			border-radius: 4px;
			border: 1px solid var(--l2-border);
			background: var(--l2-background);
			padding: 4px 16px 4px 0px;

			&.open {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}
		}

		&__description {
			display: flex;
			flex-direction: column;
			gap: 16px;
			padding: 16px;
			opacity: 0;
			transform: translateY(-8px);
			animation: cloud-account-setup-accordion-reveal 220ms ease-out forwards;

			border-radius: 4px;

			border-top: none;
			border-top-left-radius: 0;
			border-top-right-radius: 0;

			border: 1px solid var(--l2-border);
			background: var(--l2-background);

			&-item {
				display: flex;
				flex-direction: column;
				gap: 8px;

				color: var(--l1-foreground);
				font-size: 13px;
				line-height: 18px;
				letter-spacing: -0.06px;
			}

			@media (prefers-reduced-motion: reduce) {
				animation: none;
				opacity: 1;
				transform: none;
			}
		}
	}

	.cloud-account-setup-form__code-block-tabs {
		padding: 8px;
		border-radius: 4px;
		border: 1px solid var(--l2-border);
		background: var(--l2-background);

		&-header {
			display: flex;
			flex-direction: column;
			gap: 12px;

			margin-bottom: 12px;

			&-title {
				color: var(--l1-foreground);
				font-size: 14px;
				font-weight: 500;
				line-height: 20px;
				letter-spacing: -0.07px;
			}

			&-description {
				color: var(--l2-foreground);
				font-size: 12px;
				font-weight: 400;
				line-height: 18px;
				letter-spacing: -0.06px;
			}
		}

		[role='tablist'] {
			gap: 8px !important;
		}

		[role='tabpanel'] {
			padding: 0 !important;
		}

		[data-slot='tabs-trigger'] {
			padding: 4px 24px !important;
			border: none !important;
			background-color: transparent !important;
			font-size: 12px !important;
		}
	}

	@keyframes cloud-account-setup-accordion-reveal {
		from {
			opacity: 0;
			transform: translateY(-8px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.account-setup-modal-footer {
		&__confirm-button {
			background: var(--primary-background);
			color: var(--primary-foreground);
			font-size: 12px;
			font-weight: 500;
		}
		&__confirm-selection-count {
			font-family: 'Geist Mono';
		}
		&__close-button {
			background: var(--l1-background);
			border: 1px solid var(--l1-border);
			border-radius: 2px;
			color: var(--l1-foreground);
			font-family: 'Inter';
			font-size: 12px;
			font-weight: 500;

			&:hover {
				border-color: var(--l1-border);
				color: var(--l1-foreground);
			}
		}
	}

	.cloud-account-setup-form {
		.disabled {
			opacity: 0.4;
		}

		&,
		&__content {
			display: flex;
			flex-direction: column;
			gap: 24px;
		}

		&__alert {
			width: 100%;

			[data-slot='callout'] {
				width: 100%;
				box-sizing: border-box;
			}

			&-message {
				display: flex;
				align-items: center;
				gap: 8px;
				color: var(--l1-foreground);

				.retry-time {
					font-family: 'Geist Mono';
					font-size: 14px;
					font-weight: 600;
					line-height: 22px;
					letter-spacing: -0.07px;
				}
			}
		}

		&__form-group {
			display: flex;
			flex-direction: column;
			gap: 12px;
		}

		&__title {
			color: var(--l1-foreground);
			font-size: 14px;
			font-weight: 500;
			line-height: 20px;
			letter-spacing: -0.07px;
		}
		&__description {
			color: var(--l2-foreground);
			font-size: 12px;
			font-weight: 400;
			line-height: 18px;
			letter-spacing: -0.06px;
		}
		&__select {
			.ant-select-selection-item {
				color: var(--l1-foreground);
				font-size: 14px;
				line-height: 20px;
				letter-spacing: -0.07px;
			}
		}
		&__form-item {
			margin: 0;
		}
		&__include-all-regions-switch {
			display: flex;
			align-items: center;
			gap: 10px;
			color: var(--l2-foreground);
			font-size: 12px;
			line-height: 18px;
			letter-spacing: -0.06px;
			margin-bottom: 12px;
			&-label {
				background-color: transparent;
				border: none;
				color: var(--l2-foreground);
				font-size: 12px;
				line-height: 18px;
				letter-spacing: -0.06px;
				cursor: pointer;
			}
		}
		&__note {
			padding: 12px;
			color: var(--callout-primary-description);
			font-size: 12px;
			line-height: 22px;
			letter-spacing: -0.06px;
			border-radius: 4px;
			border: 1px solid
				color-mix(in srgb, var(--primary-background) 10%, transparent);
			background: color-mix(in srgb, var(--primary-background) 10%, transparent);
		}
		&__submit-button {
			border-radius: 2px;
			background: var(--primary-background);
			color: var(--primary-foreground);
			font-size: 14px;
			font-weight: 500;
			line-height: 20px;
			&-content {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8px;
			}
			&:disabled {
				opacity: 0.4;
			}
		}
	}
}
