.titlebar {
	position: fixed;
	width: 100%;
	height: calc(var(--titlebar-height) + 1px);
	z-index: 11000;
	top: 0;
	right: 0;
	-webkit-app-region: drag;
	padding: 1px 1px 0;

	&.empty {
		height: 16px;
	}

	--windows-titlebar-close: #e81123;
	--mac-titlebar-close: #fc5753;
	--mac-titlebar-close-active: #bf4744;
	--mac-titlebar-close-icon: #97040c;
	--mac-titlebar-close-icon-active: #5c090b;
	--mac-titlebar-minimize: #fdbc40;
	--mac-titlebar-minimize-active: #be8d2f;
	--mac-titlebar-minimize-icon: #985712;
	--mac-titlebar-minimize-icon-active: #582806;
	--mac-titlebar-fullscreen: #33c748;
	--mac-titlebar-fullscreen-active: #269636;
	--mac-titlebar-fullscreen-icon: #0b650d;
	--mac-titlebar-fullscreen-icon-active: #023002;
}

.titlebar-inner {
	height: var(--titlebar-height);
	width: 100%;
	display: flex;
	position: relative;
	justify-content: flex-end;
	border-bottom: 1px solid var(--separator-color-transparent);
	// background: var(--background-color);
}

.platform-win32, .platform-linux {
	.titlebar .titlebar-btn {
		width: 46px;
		height: 30px;
		font: 16px/30px TDE Heroes;
		color: var(--accent-color);
		-webkit-app-region: no-drag;
		text-align: center;

		&:hover {
			color: var(--headings-color);
			background: var(--separator-color-transparent);
		}

		&.close:hover {
			background: var(--windows-titlebar-close);
		}
	}
}

.platform-darwin .titlebar {
	.titlebar-inner {
		justify-content: flex-start;
		align-items: center;
	}

	&.not-focused .titlebar-btn {
		&.close, &.minimize, &.fullscreen {
			background: none;
		}
	}

	.macos-hover-area {
		-webkit-app-region: no-drag;
		border-radius: 6px;
		margin-left: 13px;
		display: flex;

		&:hover .titlebar-btn, &:active .titlebar-btn {
			&.close, &.minimize, &.fullscreen {
				span {
					&::after, &::before {
						visibility: visible;
					}
				}
			}

			&.close {
				background: var(--mac-titlebar-close);
			}

			&.minimize {
				background: var(--mac-titlebar-minimize);
			}

			&.fullscreen {
				background: var(--mac-titlebar-fullscreen);
			}
		}
	}

	.titlebar-btn {
		width: 12px;
		height: 12px;
		font: 24px/22px TDE Heroes;
		color: transparent;
		-webkit-app-region: no-drag;
		text-align: center;
		border-radius: 50%;
		margin-left: 8px;
		border: 1px solid var(--separator-color-transparent);

		span {
			position: relative;
			display: block;
			overflow: hidden;
			width: 100%;
			height: 100%;

			&::after, &::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				visibility: hidden;
			}
		}

		&:hover {
			cursor: pointer;
		}

		&:first-child {
			margin-left: 0;
		}

		&.close {
			background: var(--mac-titlebar-close);

			span::after, span::before {
				width: 8px;
				height: 2px;
				background: var(--mac-titlebar-close-icon);
			}

			span::before {
				transform: rotate(-45deg);
			}

			span::after {
				transform: rotate(45deg);
			}

			&:active {
				background: var(--mac-titlebar-close-active);

				span::after, span::before {
					background: var(--mac-titlebar-close-icon-active);
				}
			}
		}

		&.minimize {
			background: var(--mac-titlebar-minimize);

			span::before {
				width: 8px;
				height: 2px;
				background: var(--mac-titlebar-minimize-icon);
			}

			&:active {
				background: var(--mac-titlebar-minimize-active);

				span::before {
					background: var(--mac-titlebar-minimize-icon-active);
				}
			}
		}

		&.fullscreen {
			background: var(--mac-titlebar-fullscreen);

			span::after, span::before {
				width: 8px;
				height: 2px;
			}

			span::before {
				background: var(--mac-titlebar-fullscreen-icon);
				width: 6px;
				height: 6px;
			}

			span::after {
				background: var(--mac-titlebar-fullscreen);
				width: 10px;
				height: 2px;
				transform: rotate(45deg);
			}

			&:active {
				background: var(--mac-titlebar-fullscreen-active);

				span::before {
					background: var(--mac-titlebar-fullscreen-icon-active);
				}

				span::after {
					background: var(--mac-titlebar-fullscreen-active);
					width: 10px;
					height: 2px;
					transform: rotate(45deg);
				}
			}
		}
	}
}
