.create-sa-modal {
	max-width: 530px;
	background: var(--popover);
	border: 1px solid var(--secondary);
	border-radius: 4px;
	box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.04);

	[data-slot='dialog-header'] {
		padding: var(--padding-4);
		border-bottom: 1px solid var(--secondary);
		flex-shrink: 0;
		background: transparent;
		margin: 0;
	}

	[data-slot='dialog-title'] {
		font-size: var(--label-base-400-font-size);
		font-weight: var(--label-base-400-font-weight);
		line-height: var(--label-base-400-line-height);
		letter-spacing: -0.065px;
		color: var(--l1-foreground);
		margin: 0;
	}

	[data-slot='dialog-description'] {
		padding: 0;

		.create-sa-modal__content {
			padding: var(--padding-4);
		}
	}
}

.create-sa-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);

	&__item {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-1);
		margin-bottom: var(--spacing-4);

		> label {
			font-size: var(--paragraph-base-400-font-size);
			font-weight: var(--paragraph-base-400-font-weight);
			color: var(--foreground);
			letter-spacing: -0.07px;
		}
	}

	&__input {
		height: 32px;
		color: var(--l1-foreground);
		background-color: var(--l2-background);
		border-color: var(--l1-border);
		font-size: var(--paragraph-base-400-font-size);
		border-radius: 2px;
		width: 100%;

		&::placeholder {
			color: var(--l3-foreground);
		}

		&:focus {
			border-color: var(--primary);
			box-shadow: none;
		}
	}

	&__error {
		font-size: var(--paragraph-small-400-font-size);
		color: var(--destructive);
		line-height: var(--paragraph-small-400-line-height);
		margin: 0;
	}

	&__helper {
		font-size: var(--paragraph-small-400-font-size);
		color: var(--l3-foreground);
		margin: calc(var(--spacing-2) * -1) 0 var(--spacing-4) 0;
		line-height: var(--paragraph-small-400-line-height);
	}
}

.create-sa-modal__footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	padding: 0 var(--padding-4);
	height: 56px;
	min-height: 56px;
	border-top: 1px solid var(--secondary);
	gap: var(--spacing-4);
	flex-shrink: 0;
}
