@import "../core/window.scss";

.os-window {
    display: block;
    font-family: var(--segoe-ui);
    background: #e6e6e6;
    border: solid 1px #aaaaaa;
    box-shadow: 0px 4px 20px -8px rgba(0, 0, 0, .5);

    &.os-active {
        background: rgba(255, 255, 255, .7);
        backdrop-filter: blur(40px);
        border: solid 1px rgb(var(--os-primary-color));
        box-shadow: 0px 5px 24px -3px rgba(0,0,0,0.35);

        @supports (not(backdrop-filter: blur(40px))) {
            background: rgb(255, 255, 255, .98);
        }
    }
}

.os-dynamic-window > .os-window {
    width: var(--os-width);
    height: var(--os-height);
    top: var(--os-top);
    left: var(--os-left);

    --fullscreen-width: calc(100% - var(--os-fullscreen-offset-right) - var(--os-fullscreen-offset-left));
    --fullscreen-height: calc(100% - var(--os-fullscreen-offset-bottom) - var(--os-fullscreen-offset-top));
    --fullscreen-top: calc(-1px + var(--os-fullscreen-offset-top));
    --fullscreen-left: calc(-1px + var(--os-fullscreen-offset-left));

    @keyframes os-window-opening {
        from {
            transform: scale(.85);
            opacity: 0;
        }
    
        to {
            transform: scale(1);
            opacity: 1;
        }
    }
    
    @keyframes os-window-closing {
        from {
            transform: scale(1);
            opacity: 1;
        }
    
        to {
            transform: scale(.9);
            opacity: 0;
        }
    }

    @keyframes os-window-hiding {
        from {
            transform: scale(1);
            opacity: 1;
        }
    
        to {
            transform: scale(.1);
            top: calc(var(--os-coordinate-y-for-hiding) - var(--os-real-height) / 2);
            left: calc(var(--os-coordinate-x-for-hiding) - var(--os-real-width) / 2);
            opacity: 0;
        }
    }

    @keyframes os-window-showing {
        from {
            transform: scale(.1);
            top: calc(var(--os-coordinate-y-for-hiding) - var(--os-real-height) / 2);
            left: calc(var(--os-coordinate-x-for-hiding) - var(--os-real-width) / 2);
            opacity: 0;
        }
    
        to {
            transform: scale(1);
            opacity: 1;
        }
    }
    
    @keyframes os-window-entering-fullscreen {
        to {
            width: var(--fullscreen-width);
            height: var(--fullscreen-height);
            left: var(--fullscreen-left);
            top: var(--fullscreen-top);
            box-shadow: none;
        }
    }

    @keyframes os-window-entering-windowed {
        from {
            width: var(--fullscreen-width);
            height: 29px !important;
            top: var(--fullscreen-top);
            left: var(--fullscreen-left);
        }
    }

    &.os-hiding,
    &.os-showing {
        pointer-events: none;
    }

    &.os-opening {
        animation: os-window-opening .3s ease forwards;
    }

    &.os-hiding {
        animation: os-window-hiding .4s ease forwards;
        z-index: 9999 !important;
        pointer-events: none;
    }

    &.os-hidden {
        display: none !important;
    }

    &.os-showing {
        animation: os-window-showing .4s ease forwards;
    }

    &.os-closing {
        animation: os-window-closing .25s ease forwards;
    }

    &.os-entering-fullscreen {
        animation: os-window-entering-fullscreen .17s ease forwards;
    }

    &.os-entering-windowed {
        animation: os-window-entering-windowed .17s ease forwards;
    }

    &.os-fullscreen {
        width: var(--fullscreen-width);
        height: var(--fullscreen-height);
        left: var(--fullscreen-left);
        top: var(--fullscreen-top);
        box-shadow: none;
    }

    &.os-active {
        &.os-fullscreen {
            box-shadow: none;
        }
    }

    &.os-fullscreen, &.os-entering-fullscreen {
        &.os-active .os-title-bar {
            .os-title-bar-button[aria-label="Fullscreen"]:not(:disabled) .os-icon {
                background-position: -90px 0px;
            }
        }

        &:not(.os-active) .os-title-bar {
            .os-title-bar-button[aria-label="Fullscreen"]:not(:disabled) .os-icon {
                background-position: -90px -29px;

                &:hover {
                    background-position: -90px -58px;
                }
            }
        }

        .os-title-bar {
            .os-title-bar-button[aria-label="Fullscreen"]:disabled .os-icon {
                background-position: -90px -87px;
            }
        }
    }

    &:not(.os-fullscreen):not(.os-entering-fullscreen) os-resizers {
        display: inherit;
    }

    os-resizers {
        display: none;
    }
}

.os-title-bar {
    width: 100%;
    height: 30px;
    font-size: 11px;
    display: flex;
    align-items: center;
    font-size: 11px;
    font-family: var(--segoe-ui);
    background: #ffffff;

    &.os-active {
        background: rgb(var(--os-primary-color));
        color: #ffffff;

        .os-title-bar-button {
            background-color: rgb(var(--os-primary-color));

            &:hover:not(:disabled) {
                background-color: rgba(255, 255, 255, .1);
            }

            &:not(:disabled):active {
                background-color: rgba(255, 255, 255, .2);
            }

            &[aria-label="Hide"]:not(:disabled) .os-icon {
                background-position: 0px 0px;
            }
    
            &[aria-label="Fullscreen"]:not(:disabled) .os-icon {
                background-position: -45px 0px;
            }
    
            &[aria-label="Close"]:not(:disabled) .os-icon {
                background-position: -135px 0px;
    
                &:hover {
                    background-color: rgb(232, 17, 35);

                    &:active {
                        background-color: rgba(232, 17, 35, .8);
                    }
                }
            }
        }
    }

    .os-title-bar-content {
        width: 100%;
        height: 100%;
        padding: 8px;
        font-size: 11px;
        display: flex;
        align-items: flex-start;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        .os-title-bar-icon {
            width: 16px;
            height: 16px;
            margin-right: 5px;
            background-position: 50%;
            background-size: contain;
            background-repeat: no-repeat;
        }
    }

    .os-title-bar-controls {
        width: auto;
        height: 100%;
        display: flex;
    }
}

.os-title-bar-button {
    width: 45px;
    height: 29px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px;
    box-shadow: none;
    border: none;
    background-color: #fff;
    cursor: default;
    user-select: none;

    .os-icon {
        width: 100%;
        height: 100%;
        background-image: url("/assets/themes/win10/icons/title-bar-button-icons.png");
        background-size: initial;
        background-position: 999px 999px;
        background-repeat: no-repeat;
    }

    &:hover:not(:disabled) {
        background-color: #e5e5e5;
    }

    &[aria-label="Hide"] {
        &:not(:disabled) {
            .os-icon {
                background-position: 0px -29px;

                &:hover {
                    background-position: 0px -58px;
                }
            }
        }

        &:disabled {
            .os-icon {
                background-position: 0px -87px;
            }
        }
    }

    &[aria-label="Fullscreen"] {
        &:not(:disabled) {
            .os-icon {
                background-position: -45px -29px;
        
                &:hover {
                    background-position: -45px -58px;
                }
            }
        }

        &:disabled .os-icon {
            background-position: -45px -87px;
        }
    }

    &[aria-label="Close"] {
        &:not(:disabled) {
            :hover {
                background-color: rgb(232, 17, 35);
            }

            .os-icon {
                background-position: -135px -29px;
        
                &:hover {
                    background-position: -135px -58px;
                }
            }
        }

        &:disabled {
            .os-icon {
                background-position: -135px -87px;
            }
        }
    }
}
