signoz/frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss

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

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

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

	&__tabs {
		margin-top: 148px;

		.ant-tabs {
			&-nav {
				&::before {
					border-color: var(--bg-slate-500);

					.#{$light-theme} & {
						border-color: var(--bg-vanilla-300);
					}
				}
			}
			&-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(--bg-slate-400);
			background: linear-gradient(
				139deg,
				rgba(18, 19, 23, 0.8) 0%,
				rgba(18, 19, 23, 0.9) 98.68%
			);
			box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
			backdrop-filter: blur(20px);

			.#{$light-theme} & {
				border: 1px solid var(--bg-vanilla-300);
				background: var(--bg-vanilla-100);
			}
		}

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

		.ant-list {
			&-item {
				border-color: var(--bg-slate-500);

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

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

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

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

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

		.#{$light-theme} & {
			color: var(--text-ink-200);
		}

		&__highlight {
			color: var(--text-vanilla-100, #fff);
			font-style: normal;
			font-weight: 700;
			line-height: 24px;

			.#{$light-theme} & {
				color: var(--text-ink-100);
			}
		}
	}
	&__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;
	}

	&__faq-container {
		width: 100%;

		.ant-collapse,
		.ant-collapse-item,
		.ant-collapse-content-active {
			.#{$dark-theme} & {
				border-color: var(--bg-slate-400);
			}
		}
	}

	&__customer-stories {
		&__left-container,
		&__right-container {
			display: flex;
			flex-direction: column;
		}

		&__left-container {
			align-items: flex-end;
		}

		&__right-container {
			align-items: flex-start;
		}
	}
}

.contact-us {
	margin-top: 48px;
	color: var(--text-vanilla-400);

	.#{$light-theme} & {
		color: var(--text-ink-200);
	}
}

.cta {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;

	.update-credit-card-btn,
	.extend-trial-btn {
		margin: 24px 0;
		border-radius: 5px;
	}
}