.new-dashboard-templates-modal {
	.ant-modal-content {
		border-radius: 4px;
		border: 1px solid var(--l1-border);
		background: linear-gradient(
			139deg,
			color-mix(in srgb, var(--card) 80%, transparent) 0%,
			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
		);
		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20px);

		padding: 0;
		height: 72vh;

		.ant-modal-body {
			height: 100%;
		}
	}

	.new-dashboard-templates-content-container {
		height: 100%;
	}

	.new-dashboard-templates-content-header {
		padding: 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--l1-border);
		height: 60px;
		box-sizing: border-box;
	}

	.new-dashboard-templates-content {
		overflow: hidden;
		display: flex;
		position: relative;

		height: calc(100% - 60px);

		.new-dashboard-templates-list {
			padding: 16px 8px;
			height: 100%;
			width: 25%;
			border-right: 1px solid var(--l1-border);

			.new-dashboard-templates-search {
				height: 32px;
				margin-bottom: 16px;
			}

			.templates-list {
				display: flex;
				flex-direction: column;
				gap: 8px;
				padding-bottom: 16px;
				overflow-y: auto;
				box-sizing: border-box;

				height: calc(100% - 54px);

				&::-webkit-scrollbar {
					height: 1rem;
					width: 0.1rem;
				}

				.template-list-item {
					display: flex;
					gap: 8px;
					padding: 4px 12px;
					align-items: center;
					cursor: pointer;
					height: 32px;
					box-sizing: border-box;

					.template-icon {
						display: flex;
						height: 14px;
						width: 14px;
						align-items: center;
						justify-content: center;
					}

					.template-name {
						color: var(--muted-foreground);
						font-style: normal;
						font-weight: 300;
						line-height: 18px;
					}

					&:hover {
						border-radius: 3px;
						background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
					}

					&.active {
						border-radius: 3px;
						background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
					}
				}
			}
		}

		.new-dashboard-template-preview {
			flex: 1;
			position: relative;

			.template-preview-header {
				padding: 16px;

				display: flex;
				gap: 8px;
				align-items: center;
				justify-content: space-between;

				.template-preview-title {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 16px;

					.template-preview-icon {
						height: 40px;
						width: 40px;
						flex-shrink: 0;
						border-radius: 2px;
						border: 1px solid var(--l1-border);
						background: var(--l3-background);
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.template-info {
						.template-name {
							color: var(--l1-foreground);
							font-family: Inter;
							font-size: 14px;
							font-style: normal;
							font-weight: 500;
							line-height: 20px; /* 142.857% */
							letter-spacing: -0.07px;
						}

						.template-description {
							color: var(--l2-foreground);
							font-family: Inter;
							font-size: 12px;
							font-style: normal;
							font-weight: 400;
							line-height: 18px; /* 150% */
						}
					}
				}
			}

			.template-preview-image {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 24px;
				height: calc(100% - 144px);
				position: relative;

				img {
					width: 100%;
					max-width: 100%;
					padding: 24px;
					border: 1px solid var(--l1-border);
					background: var(--l3-background);
					max-height: 100%;
					object-fit: contain;
				}
			}
		}
	}

	.new-dashboard-templates-modal-footer {
		.create-dashboard-json-error {
			margin-bottom: 8px;
			display: flex;
		}

		.action-btns-container {
			display: flex;
			justify-content: space-between;
		}
	}

	.ant-modal-footer {
		margin-top: 0;
		padding: 16px;
		border-top: 1px solid var(--l1-border);
	}
}
