$light-theme: 'lightMode';
$dark-theme: 'darkMode';

@keyframes gradientFlow {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.workspace-suspended {
	&__modal {
		.ant-modal-mask {
			backdrop-filter: blur(2px);
		}
	}

	&__tabs {
		margin-top: 148px;

		.ant-tabs {
			&-nav {
				&::before {
					border-color: var(--l1-border);

					.#{$light-theme} & {
						border-color: var(--l1-border);
					}
				}
			}
			&-nav-wrap {
				justify-content: center;
			}
		}
	}

	&__modal {
		&__header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&__actions {
				display: flex;
				align-items: center;
				gap: 16px;
			}
		}
		.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);

			.#{$light-theme} & {
				border: 1px solid var(--l1-border);
				background: var(--card);
			}
		}

		.ant-modal-header {
			background: transparent;
		}

		.ant-list {
			&-item {
				border-color: var(--l1-border);

				.#{$light-theme} & {
					border-color: var(--l1-border);
				}

				&-meta {
					align-items: center !important;

					&-title {
						margin-bottom: 0 !important;
					}

					&-avatar {
						display: flex;
					}
				}
			}
		}
		&__title {
			font-weight: 400;
			color: var(--muted-foreground);

			.#{$light-theme} & {
				color: var(--foreground);
			}
		}
		&__cta {
			margin-top: 54px;
		}
	}
	&__container {
		padding-top: 64px;
	}
	&__details {
		width: 80%;
		margin: 0 auto;
		color: var(--muted-foreground);
		text-align: center;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 24px; /* 150% */

		.#{$light-theme} & {
			color: var(--foreground);
		}

		&__highlight {
			color: var(--l1-foreground);
			font-style: normal;
			font-weight: 700;
			line-height: 24px;

			.#{$light-theme} & {
				color: var(--foreground);
			}
		}
	}
	&__title {
		background: linear-gradient(
			99deg,
			#ead8fd 0%,
			#7a97fa 33%,
			#fd5ab2 66%,
			#ead8fd 100%
		);
		background-size: 300% 300%;
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: gradientFlow 24s ease infinite;
		margin-bottom: 18px;
	}

	&__creative {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 54px;

		img {
			width: -webkit-fill-available;
		}
	}
}
