.settings-page {
	max-height: 100vh;
	overflow: hidden;

	.settings-page-header {
		border-bottom: 1px solid var(--l1-border);
		background: var(--l1-background);
		backdrop-filter: blur(20px);

		.settings-page-header-title {
			color: var(--l1-foreground);
			text-align: center;
			font-family: Inter;
			font-size: 13px;
			font-style: normal;
			line-height: 14px;
			letter-spacing: 0.4px;

			display: flex;
			align-items: center;
			gap: 8px;
			padding: 16px;
		}
	}

	.settings-page-content-container {
		display: flex;
		flex-direction: row;
		align-items: flex-start;

		.settings-page-sidenav {
			width: 240px;
			height: calc(100vh - 48px);
			border-right: 1px solid var(--l1-border);
			background: var(--l1-background);
			padding-top: var(--padding-1);
			display: flex;
			flex-direction: column;
			gap: var(--spacing-12);
			overflow-y: auto;

			.settings-nav-section {
				display: flex;
				flex-direction: column;
			}

			.settings-nav-section--with-divider {
				border-top: 1px solid var(--l1-border);
				padding-top: var(--padding-4);
			}

			.settings-nav-section-title {
				font-size: var(--uppercase-small-600-font-size);
				font-weight: var(--uppercase-small-600-font-weight);
				letter-spacing: 0.88px;
				text-transform: uppercase;
				color: var(--l3-foreground);
				margin-bottom: var(--margin-2);
				padding: var(--padding-1) var(--padding-3);
			}

			.nav-item {
				.nav-item-data {
					margin: 0px 8px 0px 4px;
				}

				&.active {
					.nav-item-data .nav-item-label {
						color: var(--l1-foreground);
					}
				}
			}
		}

		.settings-page-content {
			flex: 1;
			height: calc(100vh - 48px);
			background: var(--l1-background);
			padding: 10px 8px;
			overflow-y: auto;

			&::-webkit-scrollbar {
				width: 0.3rem;
				height: 0.3rem;
			}

			&::-webkit-scrollbar-track {
				background: transparent;
			}

			&::-webkit-scrollbar-thumb {
				background: var(--l3-background);
			}

			&::-webkit-scrollbar-thumb:hover {
				background: var(--l3-background);
			}
		}
	}
}
