/* =========================================
    Module: Window API
========================================= */

:root {
    --window-radius: 8px;
    --window-border-width: 1px;
    --window-border-colour: rgba(0, 0, 0, 0.3);
    --window-bg: var(--frame-bg-colour, #111);
    --window-content-bg: transparent;

    --window-header-height: clamp(1.25rem, 3vw, 1.375rem);
    --window-header-pad-inline: clamp(0.375rem, 1.5vw, 0.5rem);
    --window-header-font-size: calc(clamp(0.55rem, 0.5rem + 0.2vw, 0.6875rem) / calc(var(--kc-text-scale) * 1.2));
    --window-header-z-index: 1;
    --window-header-bg: var(--term-header-bg, #222);
    --window-header-fg: var(--term-header-fg, #fff);
    --window-header-top-border-radius: 10px;

    --window-controls-gap: clamp(0.5rem, 1.8vw, 0.625rem);
    --window-btn-font-size: calc(clamp(0.55rem, 0.5rem + 0.2vw, 0.6875rem) / calc(var(--kc-text-scale) * 1.2));
    --window-btn-size: clamp(0.9375rem, 2.8vw, 1.125rem);
    --window-btn-line-height: 1;
    --window-btn-hover-scale: 1.2;
    --window-btn-hover-transition: 0.2s ease;

    --window-btn-symbol-font-size: calc(clamp(0.55rem, 0.5rem + 0.2vw, 0.625rem) / var(--kc-text-scale) * 1.2);
    --window-btn-symbol-font-weight: 700;

    --window-btn-close-fill: #ff5f57;
    --window-btn-minimise-fill: #febc2e;
    --window-btn-float-fill: #28c840;

    --window-btn-close-colour: #8b0000;
    --window-btn-minimise-colour: #b8860b;
    --window-btn-float-colour: #006400;

    --window-title-colour: inherit;
    --window-title-font-weight: 700;
    --window-title-font-family: inherit;

    --window-z-index: 1000;
    --window-left: clamp(0.5rem, 2vw, 0.625rem);
    --window-top: clamp(0.5rem, 2vw, 0.625rem);
    --window-width: min(50%, calc(100vw - 2rem));
    --window-height: auto;

    --window-launcher-left: clamp(0.5rem, 2vw, 0.625rem);
    --window-launcher-top: clamp(0.5rem, 2vw, 0.625rem);
    --window-launcher-display: inline-block;
    --window-launcher-z-index: 1000;

    --window-header-gap: clamp(0.5rem, 2vw, 0.75rem);
}

.window-frame {
    position: relative;
    min-inline-size: 0;
    box-sizing: border-box;
    overflow: hidden;

    border-radius: var(--window-radius);
    background: var(--window-bg);
    box-shadow: var(--frame-box-shadow);
    border: var(--window-border-width) solid var(--window-border-colour);

    font-family: var(--window-title-font-family);

    &.closed {
        display: none;
    }

    &.floating {
        position: fixed;
        left: var(--window-left);
        top: var(--window-top);
        width: var(--window-width);
        height: var(--window-height);
        max-width: 100vw;
        max-height: 100vh;
        resize: both;
        z-index: var(--window-z-index);

        .window-header {
            cursor: grab;
        }
    }

    &.maximised {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        resize: none;
        z-index: var(--window-z-index);

        .window-header {
            cursor: grab;
        }
    }

    &.minimised {
        .window-controls .btn.float {
            visibility: hidden;
            pointer-events: none;
        }
    }
}

.window-header {
    height: var(--window-header-height);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--window-header-gap);
    border-top-left-radius: var(--window-header-top-border-radius);
    border-top-right-radius: var(--window-header-top-border-radius);

    position: sticky;
    top: 0;
    z-index: var(--window-header-z-index);

    background: var(--window-header-bg);
    color: var(--window-header-fg);

    padding: 0 var(--window-header-pad-inline);
    font-size: var(--window-header-font-size);

    user-select: none;
    cursor: default;
    box-sizing: border-box;

    &.is-dragging {
        cursor: grabbing;
    }
}

.window-controls {
    display: flex;
    gap: var(--window-controls-gap);

    .btn {
        appearance: none;
        border: 0;
        background: transparent;
        padding: 0;
        margin: 0;

        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 1em;
        height: 1em;

        cursor: pointer;
        user-select: none;

        font-size: var(--window-btn-font-size);
        line-height: var(--window-btn-line-height);

        transition: transform var(--window-btn-hover-transition);

        svg {
            display: block;
            width: var(--window-btn-size);
            height: var(--window-btn-size);
            overflow: visible;
        }

        &:hover {
            transform: scale(var(--window-btn-hover-scale));
        }

        &::after {
            content: "";
            position: absolute;

            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            font-size: var(--window-btn-symbol-font-size);
            font-weight: var(--window-btn-symbol-font-weight);

            opacity: 0;
            pointer-events: none;

            transition: opacity var(--window-btn-hover-transition);
        }

        &:hover::after {
            opacity: 1;
        }

        &.close::after {
            content: "×";
            color: var(--window-btn-close-colour);
        }

        &.minimise::after,
        &.toggle-view::after {
            content: "–";
            color: var(--window-btn-minimise-colour);
        }

        &.float::after {
            content: "+";
            color: var(--window-btn-float-colour);
        }
    }
}

.window-title {
    flex: 1;
    margin-left: auto;
    margin-right: auto;

    text-align: center;

    font-family: var(--window-title-font-family);
    font-weight: var(--window-title-font-weight);
    font-size: var(--window-header-font-size);
    color: var(--window-title-colour);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-inline-size: 0;
}

.window-body {
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
    overflow: auto;
    background: var(--window-content-bg);
    display: flex;
    flex-direction: column;
}

.window-body>[data-window-content-root="true"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
}

.window-launcher {
    display: none;
    position: fixed;
    left: var(--window-launcher-left);
    top: var(--window-launcher-top);
    z-index: var(--window-launcher-z-index);
    cursor: grab;
    touch-action: none;

    &[data-window-launcher-visible="true"] {
        display: var(--window-launcher-display);
    }

    &.is-dragging {
        cursor: grabbing;
    }

    image-rendering: pixelated;
    border-radius: var(--term-icon-radius);

    &:hover {
        filter: drop-shadow(var(--term-icon-hover-shadow) var(--accent));
    }
}