@use '../mixins';
@use '../assets/mono';

#app-mount .layer__960e4 {
	background: var(--bg-main);

	.toolsContainer__23e6b {
		margin: 0;
		padding: 0;
		flex: none;
		width: auto;
		position: fixed;
		top: 5px;
		left: 5px;
		z-index: 2;
		width: auto;
		-webkit-user-drag: none;
		-webkit-app-region: none;
	}
	.tools__23e6b {
		position: static;
	}
	.container_c2b141 {
		flex-direction: row;
		align-items: center;
		width: 100%;
		gap: 8px;
	}
	.closeButton_c2b141 {
		border-radius: var(--btn-radius);
		width: 42px;
		flex: 0 0 42px;
		border: none;
		cursor: var(--cursor);
		svg {
			mask: url(mono.$arrow-left) center/cover;
			width: 16px;
			height: 16px;
			background: var(--text-primary);
		}
		path {
			display: none;
		}
		&:hover {
			background: var(--btn-bg-hover);
		}
		&:active {
			background: var(--btn-bg-active);
			transform: none;
		}
	}
	.keybind_c2b141 {
		margin-top: 0;
		font-size: 0;
		color: var(--text-primary);
		&::before {
			content: 'Settings';
			font-size: var(--font-size-xs);
			display: block;
		}
	}

	& ~ .layer__960e4 {
		.standardSidebarView__23e6b {
			background: var(--bg-main);
		}

		.sidebarRegion__23e6b {
			flex: 0;
			margin-top: 46px;
		}
		.sidebarRegionScroller__23e6b {
			background: var(--bg-main);
		}
		.sidebar__23e6b {
			width: 270px;
			padding: 0 16px 16px;
			.item_b3f026 {
				font-size: var(--font-size-sm);
				border-radius: var(--rounded);
				padding: 8px 12px;
				display: flex;
				align-items: center;
				gap: 12px;
				position: relative;
				cursor: var(--cursor);

				&:not(:last-child) {
					margin-bottom: 4px;
				}
				svg {
					display: none;
				}

				.selectedBackground-1qyzak {
					background: var(--accent);
				}

				// ~~Disabled icons (for now hopefully)
				// &::before {
				// 	content: "";
				// 	width: 18px;
				// 	height: 18px;
				// 	display: block;
				// 	background-size: cover;
				// 	background-position: center;
				// }
				&::after {
					content: '';
					position: absolute;
					left: 0;
					height: 0;
					width: 4px;
					border-radius: 4px;
					background: var(--accent);
					opacity: 0;
					transition: 0.15s var(--transition);
				}
				&:hover {
					background: var(--bg-interactive);
				}
				&.selected_b3f026 {
					background: var(--bg-interactive);
					.premiumLabel-V52REm {
						color: var(--accent-text);
					}
					.selectedIcon-3rJcYb {
						fill: var(--accent-text);
					}
					&::after {
						height: 16px;
						opacity: 1;
					}
					&:hover {
						background: var(--bg-interactive-hover);
					}
				}
			}
			.header_b3f026 {
				display: none;
			}
			.separator_b3f026 {
				height: 0;
			}
		}

		.contentRegion__23e6b {
			background: var(--bg-main);
		}
		.contentRegionScroller__23e6b {
			background: var(--bg-main);
		}
		.contentColumn__23e6b:not(.contentColumnMinimal__23e6b) {
			padding: 0 32px 32px;
			max-width: 1000px;
			& > div {
				animation: settingsIn 0.25s ease forwards;
			}
		}
	}
}
