.workspace-tabs .workspace-leaf-content.beautitab {
	color: #dadada;
	container-type: size;

	.view-header {
		background: transparent;
		position: absolute;
		top: 0;
		right: 0;
		left: 40px;
		height: 40px;
		justify-content: space-between;
		align-items: center;

		.view-header-nav-buttons {
			display: none;
		}

		.view-header-title-container {
			display: none;
		}

		.view-action {
			--icon-color: currentColor;
		}

		div {
			margin-left: auto;
		}
	}

	.view-content {
		background-color: transparent;
		padding: 0;
		overflow: hidden;
	}

	.beautitab-root {
		height: 100%;
		width: 100%;
		text-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px;
		background: var(--background);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;

		&.beautitab-root--transparent {
			background: transparent;

			.beautitab-wrapper {
				background: transparent;

				.beautitab-top {
					background: transparent;
				}

				.beautitab-quote {
					background: transparent;
				}
			}
		}

		&.beautitab-root--transparentWithShadows {
			background: transparent;
		}

		.beautitab-wrapper {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background: radial-gradient(
				circle,
				rgba(0, 0, 0, 0.6) 0%,
				rgba(0, 0, 0, 0.6) 20%,
				rgba(0, 0, 0, 0) 100%
			);

			.beautitab-top {
				flex: 1;
				background: linear-gradient(
					to bottom,
					rgba(0, 0, 0, 0.6),
					rgba(0, 0, 0, 0)
				);
				width: 100%;
				height: 60px;
				padding: 10px;

				.beautitab-iconbutton {
					opacity: 0.8;

					&:hover {
						opacity: 1;
					}

					svg {
						width: 22px;
						height: 22px;
					}
				}
			}

			.beautitab-center {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 100%;
				padding-bottom: 20px;

				.beautitab-time {
					font-size: 1050%;
					line-height: 1;

					@container (max-width: 520px) {
						font-size: 30cqw;
					}
				}

				.beautitab-greeting {
					font-size: 3rem;

					@container (max-width: 520px) {
						font-size: 8cqw;
					}
				}
			}

			.beautitab-bottom {
				flex: 1;
				display: flex;
				flex-direction: column;
				width: 100%;
				align-items: center;

				.beautitab-search {
					width: 50%;
					min-width: 500px;

					@container (max-width: 520px) {
						width: 90%;
						min-width: auto;
					}

					.beautitab-search-wrapper {
						height: 60px;
						border-radius: 60px;
						display: flex;
						align-items: center;
						width: 100%;
						backdrop-filter: blur(5px);
						background: rgba(255, 255, 255, 0.1);
						box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
						margin-bottom: 20px;
						text-decoration: none;
						color: inherit;
						line-height: 1;
						padding-left: 20px;

						.beautitab-search-text {
							font-size: 28px;
							opacity: 0.8;
							padding-left: 20px;
						}

						.beautitab-icon svg {
							height: 26px;
							width: 26px;
						}
					}
				}

				.beautitab-recentlyedited {
					display: flex;
					align-items: center;
					justify-content: center;
					overflow-y: auto;
					width: 100%;

					.beautitab-recentlyedited-file {
						color: inherit;
						text-decoration: none;
						text-align: center;
						padding: 10px;
						white-space: nowrap;
						overflow: hidden;
						width: 100px;

						&:hover {
							backdrop-filter: blur(5px);
							background: rgba(255, 255, 255, 0.1);
							box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
							border-radius: 10px;
						}

						.beautitab-icon {
							display: block;
							svg {
								width: 24px;
								height: 24px;
							}
						}

						.beautitab-recentlyedited-file-name {
							display: block;
							font-size: 12px;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}
				}
			}

			.beautitab-quote {
				width: 100%;
				min-height: 60px;
				padding-bottom: 10px;
				background: linear-gradient(
					to bottom,
					rgba(0, 0, 0, 0) 0%,
					rgba(0, 0, 0, 0.4) 60%,
					rgba(0, 0, 0, 0.6) 100%
				);
				text-align: center;

				@container (max-width: 599px) {
					padding-bottom: 80px;
				}

				.beautitab-quote-content {
					font-size: 1.1rem;
					font-weight: 500;
					margin-bottom: 5px;

					@container (max-width: 600px) {
						font-size: 0.8rem;
					}
				}

				.beautitab-quote-author {
					font-size: 0.9rem;
					opacity: 0.7;
				}
			}
		}
	}

	.beautitab-iconbutton {
		text-decoration: none;
		color: inherit;

		.beautitab-iconbutton-text {
			position: absolute;
			left: -9999999px;
		}
	}
}
