@wrapper_background: rgba(255, 255, 255, 1);

@topbar_height: 30px;
@topbar_background: rgba(0, 0, 0, 0.4);

.window_wrapper {
	border-radius: 12px;

	background-color: @wrapper_background;
	border: 1px solid rgba(161, 133, 133, 0.2);
	overflow: hidden;

	&.translucid {
		border: unset;
		background-color: rgba(0, 0, 0, 0.2);
		
		backdrop-filter: blur(10px);
		--webkit-backdrop-filter: blur(10px);
		filter: drop-shadow(8px 8px 10px rgba(0, 0, 0, 0.5));
	}
}

.window_topbar {
	position: sticky;
	z-index: 51;
	background-color: @topbar_background;

	height: @topbar_height;
	width: 100%;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;

	> div {
		margin: 0 5px;
		line-height: 0;
	}

	.title {
		margin-left: 20px;

		color: #fff - @topbar_background;

		font-size: 13px;
		font-style: italic;
		font-family: "JetBrains Mono", monospace;
	}

	.actions {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: end;

		color: #fff - @topbar_background;

		> div {
			transition: all 150ms ease-in-out;
			margin-right: 10px;
			cursor: pointer;

			height: fit-content;
			width: fit-content;
			line-height: 0;

			display: flex;
			align-items: center;
			justify-content: end;
		}
		> div:hover {
			color: var(--primary-color);
		}
	}
}

.window_body {
	z-index: 50;

	padding: 10px 20px;
	height: calc(100% - @topbar_height);
	width: 100%;

	overflow: overlay;
	user-select: text !important;
	--webkit-user-select: text !important;

	> div {
		user-select: text !important;
		--webkit-user-select: text !important;
	}
}