:root 
{
	--main-size: 6px;
}
.window-button 
{
	width: 40px;
	height: 40px;
	background-color: var(--color-galax);
	position: relative;
	cursor: pointer;
	transition: background-color 0.3s ease-in-out;
}
.window-button:hover { background-color: var(--color-black); }
.window-button.active { background-color: var(--color-sidebarbg); }

.window-button > div 
{
	position: absolute;
	top: var(--main-size); bottom: var(--main-size); left: var(--main-size); right: var(--main-size);
	background-color: var(--color-black);
	transition: background-color 0.3s ease-in-out;
}
.window-button:hover > div, .window-button.active > div
{
	background-color: var(--color-white);
}

.window-button > div:before, .window-button > div:after {
	content: ''; position: absolute; background-color: var(--color-galax);
	transition: background-color 0.3s ease-in-out;
}
.window-button:hover > div:before, .window-button:hover > div:after { background-color: var(--color-black); }
.window-button.active > div:before, .window-button.active > div:after {	background-color: var(--color-sidebarbg); }

.window-button > div:before 
{
	top: calc(50% - 2px);
	width: 100%;
	height: 4px;
}

.window-button > div:after 
{
	left: calc(50% - 2px);
	height: 100%;
	width: 4px;
}