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

.os-window {
    display: block;
    box-shadow:
        inset -1px -1px rgba(var(--os-primary-color), .6),
        inset 1px 1px rgba(var(--os-primary-color), .5),
        inset -2px -2px rgba(var(--os-primary-color), .6),
        inset 2px 2px rgba(var(--os-primary-color), .3),
        inset -3px -3px rgba(var(--os-primary-color), .4),
        inset 3px 3px rgba(var(--os-primary-color), .3);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: #ece9d8;
    padding: 0 0 3px 0;

    &.os-active {
        box-shadow:
            inset -1px -1px rgba(var(--os-primary-color), 1),
            inset 1px 1px rgba(var(--os-primary-color), .9),
            inset -2px -2px rgba(var(--os-primary-color), 1),
            inset 2px 2px rgba(var(--os-primary-color), .7),
            inset -3px -3px rgba(var(--os-primary-color), .8),
            inset 3px 3px rgba(var(--os-primary-color), .7);
    }

    &:not(.os-active) {
        .os-title-bar-button {
            opacity: .5;
        }
    }

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

.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% + 6px - 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(-2px + var(--os-fullscreen-offset-top));
    --fullscreen-left: calc(-3px + var(--os-fullscreen-offset-left));

    @keyframes os-window-showing {
        0% {
            height: 27px;
            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: 27px;
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes os-window-hiding {
        from {
            height: 27px;
            transform: scale(1);
            opacity: 1;
        }

        to {
            height: 27px;
            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: 27px;
        }

        99% {
            height: 27px;
        }

        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: 27px;
            top: var(--fullscreen-top);
            left: var(--fullscreen-left);
        }
    
        70% {
            height: 27px;
        }
    }

    &.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);
        left: var(--fullscreen-left);
        top: var(--fullscreen-top);
    }

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

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

            &:not(:disabled) .os-icon:active {
                background-position: -42px -21px;
            }
        }
    }

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

    os-resizers {
        display: none;
    }
}

os-title-bar {
    width: 100%;
    height: 28px;
    font-size: 11px;
    background: linear-gradient(
        180deg,
        rgba(var(--os-primary-color), .5) 0%,
        rgba(var(--os-primary-color), .7) 8%,
        rgba(var(--os-primary-color), .7) 40%,
        rgba(var(--os-primary-color), .56) 88%,
        rgba(var(--os-primary-color), .58) 93%,
        rgba(var(--os-primary-color), .6) 95%,
        rgba(var(--os-primary-color), .8) 96%,
        rgba(var(--os-primary-color), .8) 100%
    ), #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 5px 3px 3px;
    border-top: 1px solid rgba(var(--os-primary-color), .6);
    border-left: 1px solid rgba(var(--os-primary-color), .7);
    border-right: 1px solid rgba(var(--os-primary-color), .8);
    border-top-left-radius: 8px;
    border-top-right-radius: 7px;
    font-size: 13px;
    text-shadow: 1px 1px rgba(var(--os-primary-color), .8);
    box-sizing: border-box;

    &.os-active {
        background: linear-gradient(
            180deg,
            rgba(var(--os-primary-color), .7) 0%,
            rgba(var(--os-primary-color), .9) 8%,
            rgba(var(--os-primary-color), .9) 40%,
            rgba(var(--os-primary-color), .76) 88%,
            rgba(var(--os-primary-color), .78) 93%,
            rgba(var(--os-primary-color), .8) 95%,
            rgba(var(--os-primary-color), 1) 96%,
            rgba(var(--os-primary-color), 1) 100%
        ), #ffffff;
        border-top: 1px solid rgba(var(--os-primary-color), .8);
        border-left: 1px solid rgba(var(--os-primary-color), .9);
        border-right: 1px solid rgba(var(--os-primary-color), 1);
        text-shadow: 1px 1px rgba(var(--os-primary-color), 1);
    }

    .os-title-bar-content {
        width: 100%;
        height: 100%;
        font-size: 11px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        font-weight: bold;
        color: white;
        letter-spacing: 0;
        margin-right: 24px;
        padding-left: 3px;
        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 {
        display: flex;
    }
}

.os-title-bar-button {
    width: 21px;
    height: 21px;
    min-width: 21px;
    min-height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 2px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: none;
    border: none;
    border-radius: 4px;
    background-color: rgb(var(--os-primary-color));
    background-image: url("/assets/themes/winXP/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/winXP/icons/title-bar-button-icons.png");
        background-size: initial;
        background-repeat: no-repeat;
        background-position: 999px 999px;
    }

    &:active,
    &:hover,
    &:focus {
        outline: none;
        box-shadow: none !important;
    }

    &:hover:not(:disabled) {
        background-position: 0px -21px;
    }

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

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

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

        &:disabled {
            opacity: .3;
        }
    }

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

        &:disabled {
            opacity: .3;
        }
    }

    &[aria-label="Close"] {
        background-color: #d12f00;

        .os-icon {
            background-position: -63px 0px;
        }

        &:disabled {
            opacity: .3;
        }
    }
}
