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

.os-window {
    display: block;
    padding: 3px;
    background: rgb(var(--os-background-color));
    box-shadow: var(--border-window-outer), var(--border-window-inner);

    .os-window-body {
        margin: 0px 2px;
    }
}

.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% + 1px - var(--os-fullscreen-offset-right) - var(--os-fullscreen-offset-left));
    --fullscreen-height: calc(100% - 2px - var(--os-fullscreen-offset-bottom) - var(--os-fullscreen-offset-top));
    --fullscreen-top: calc(-3px + var(--os-fullscreen-offset-top));
    --fullscreen-left: calc(-5px + var(--os-fullscreen-offset-left));

    @keyframes os-window-showing {
        0% {
            height: 20px;
            transform: scale(.2);
            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);
        }
    
        70% {
            height: 20px;
        }
    
        100% {
            transform: scale(1);
        }
    }
    
    @keyframes os-window-hiding {
        from {
            height: 20px;
            transform: scale(1);
            opacity: 1;
        }

        to {
            height: 20px;
            transform: scale(.2);
            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-entering-fullscreen {
        0% {
            height: 20px;
        }
    
        99% {
            height: 20px;
        }
    
        100% {
            width: var(--fullscreen-width);
            height: var(--fullscreen-height);
            top: var(--fullscreen-top);
            left: var(--fullscreen-left);
        }
    }
    
    @keyframes os-window-entering-windowed {
        0% {
            width: var(--fullscreen-width);
            height: 20px;
            top: var(--fullscreen-top);
            left: var(--fullscreen-left);
        }
    
        70% {
            height: 20px;
        }
    }

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

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

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

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

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

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

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

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

                &:active .os-icon {
                    background-position: -32px -14px;
                }
            }
            
            &:disabled .os-icon {
                background-position: -32px -28px;
            }
        }
    }

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

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

    os-resizers {
        display: none;
    }
}

os-title-bar {
    width: 100%;
    height: 20px;
    background: linear-gradient(90deg, #808080, rgb(var(--os-background-color)));
    font-size: 11px;
    padding: 3px 2px 3px 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    &.os-active {
        background: linear-gradient(90deg, rgb(var(--os-primary-color)), rgba(var(--os-primary-color), .5)), #ffffff;
    }

    .os-title-bar-content {
        width: 100%;
        height: 100%;
        font-size: 11px;
        font-weight: bold;
        color: white;
        letter-spacing: 0;
        margin-right: 24px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

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

    .os-title-bar-controls {
        display: flex;
    }

    .os-title-bar-button[aria-label="Close"] {
        margin-left: 2px;
    }
}

.os-title-bar-button {
    width: 16px;
    height: 14px;
    min-width: 16px;
    min-height: 14px;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("/assets/themes/win98/icons/title-bar-button.png");
    background-position: 0px 0px;
    background-repeat: no-repeat;
    cursor: default;
    user-select: none;

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

    &:not(:disabled):active {
        background-position: 0px -14px;

        &[aria-label="Hide"] .os-icon {
            background-position: 0px -14px;
        }

        &[aria-label="Fullscreen"] .os-icon {
            background-position: -16px -14px;
        }

        &[aria-label="Close"] .os-icon {
            background-position: -48px -14px;
        }
    }

    &:focus {
        outline: none;
    }

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

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

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

        &:disabled .os-icon {
            background-position: -16px -28px;
        }
    }

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

        &:disabled .os-icon {
            background-position: -48px -28px;
        }
    }
}
