frontend/src/components/window/title-bar/WindowButtonsWindows.svelte

<script lang="ts">
	import LayoutRow from "@graphite/components/layout/LayoutRow.svelte";
	import IconLabel from "@graphite/components/widgets/labels/IconLabel.svelte";

	export let maximized = false;
</script>

<LayoutRow class="window-button windows minimize" tooltip="Minimize">
	<IconLabel icon={"WindowButtonWinMinimize"} />
</LayoutRow>
{#if !maximized}
	<LayoutRow class="window-button windows maximize" tooltip="Maximize">
		<IconLabel icon={"WindowButtonWinMaximize"} />
	</LayoutRow>
{:else}
	<LayoutRow class="window-button windows restore-down" tooltip="Restore Down">
		<IconLabel icon={"WindowButtonWinRestoreDown"} />
	</LayoutRow>
{/if}
<LayoutRow class="window-button windows close" tooltip="Close">
	<IconLabel icon={"WindowButtonWinClose"} />
</LayoutRow>

<style lang="scss" global>
	.window-button.windows {
		flex: 0 0 auto;
		align-items: center;
		padding: 0 17px;

		svg {
			fill: var(--color-e-nearwhite);
		}

		&:hover {
			background: var(--color-6-lowergray);

			svg {
				fill: var(--color-f-white);
			}
		}

		&.close:hover {
			background: #e81123;
		}
	}
</style>