.windowTopBar:active .windowTopBarRight{
    opacity: 0;
	transition-duration: 200ms;
}

.windowTopBar:active~.windowContent{
    /* it's already set in windowcss */
    transform-origin: top;
    transform: scale(0.8) translateY(1rem);
    border-radius: 1.3rem;
    overflow: hidden;
    background-color: #2225;
}

.windowTopBar:active>.windowTopBarLeft{
    transform: translateX(-100%);
}
.windowTopBar>.windowTopTitleBar{
    transition-duration: 500ms;
    transform: scale(1.0);
}
.windowTopBar:active>.windowTopTitleBar{
    transition-timing-function: ease-out;
    transition-duration: 120ms;
    transform: scale(1.2);
}

.windowTopBar:active{
    /*background-color: hsl(228deg, 40%, 60%);*/
    /*box-shadow: 0 0 0.8rem hsl(228deg, 20%, 10%) inset;*/
    /*letter-spacing: 0.2rem;*/
    /*font-size: 1.2rem;*/
    box-shadow: 0 0 0 1px #cccc inset;
    background-color: hsl(228deg, 20%, 60%);
    border-radius: calc(var(--top-bar-thickness) / 2);
    transition-duration: 120ms;
}
.windowTopBar{
    transition-duration: 800ms;

    min-height: var(--top-bar-thickness);
    background-color: hsl(228deg, 20%, 40%);
    /*padding: 3px;*/
    display: flex;
    flex-direction: row;
    /*border-radius: var(--window-border-radius) var(--window-border-radius) 0 0;*/

    user-select: none;
}

.windowTopBarLeft{
    /*background-color: #adff2f22;*/
    display: flex;
    justify-content: flex-start;
    padding-left: 0.5rem;
    align-items: center;
    flex-grow: 1;
}
.windowTopBarLeft{
    transition-duration: 600ms;
}

.windowTopBarRight{
    flex-grow: 1;
    /*background-color: #daa52022;*/
    display: flex;
    justify-content: flex-end;
}

.windowAppIcon{
    /*background-color: #4b008222;*/
    height: calc(var(--window-icon-ratio) * var(--top-bar-thickness));
    /*transform: scale(0.5)*/
    /*display: inline;*/
}

.windowTopTitleBar{
    /*background-color: #5552;*/
    display: flex;
    align-items: center;
    justify-content: center;
}


button.minimizeWindow,
button.resizeWindow,
button.closeWindow{
    width: calc(var(--window-main-button-ratio) * var(--top-bar-thickness));
    border-radius: 0;
    border: none;
    background-color: #0000;
    transition-duration: 120ms;
    color: #eeeb;
}

button.minimizeWindow:hover,
button.resizeWindow:hover,
button.closeWindow:hover{
    color: #eeef;
    background-color: #eee4;
}