@use "defaults.css";

.app-frame {
    // Themes
    // ===========================================================================
    &.dark {
        // True Gray Palette
        // https://tailwindcss.com/docs/customizing-colors#color-palette-reference
        // 50   #fafafa
        // 100  #f5f5f5
        // 200  #e5e5e5
        // 300  #d4d4d4
        // 400  #a3a3a3
        // 500  #737373
        // 600  #525252
        // 700  #404040
        // 800  #262626
        // 900  #171717
        --background      : #262626; // 800
        --bar-background  : #404040 linear-gradient(to bottom, #525252, #404040); // 700 to 600
        --border-color    : #525252; // 600
        --color           : #f5f5f5; // 100
        --title-color     : #d4d4d4; // 300
        --url-background  : #737373; // 500
        --url-border-width: 0;
        --url-color       : #d4d4d4; // 300
    }

    &.wireframe {
        --background      : none;
        --bar-background  : none;
        --border-width    : 2px;
        --url-border-width: 2px;
        --url-background  : none;
    }


    // Core
    // ===========================================================================
    --bar-inset   : 20px;
    --button-inset: 20px;
    --title-inset : 20px;
    --url-inset   : 10px;

    &.mac {
        --button-gap : calc(var(--button-size) * 0.57);
        --button-size: 12px;
        --title-inset: calc((var(--button-inset) * 2) + (var(--button-size) * 3) + (var(--button-gap) * 2));
        --url-inset  : var(--title-inset);
    }

    &.win {
        --button-gap         : var(--button-inset);
        --button-inset       : 25px;
        --button-size        : 10px;
        --button-stroke-width: 1px;
        --title-inset        : calc((var(--button-inset) * 2) + (var(--button-size) * 3) + (var(--button-gap) * 2));
        --url-inset          : var(--title-inset);
    }

    // Global Overrides
    // These "default" values allow top-level declarations to override
    // declarations with higher specificity due to nesting.
    // Ex: Top-level --button-color should override theme value
    &.win {
        --button-color-default: #ccc;
    }

    &.dark {
        &.win {
            --button-color-default: #a3a3a3;
        }
    }

    &.wireframe {
        --button-color-default: #d4d4d4;

        &.dark {
            --button-color-default: var(--border-color);
        }
    }


    // Content
    // ---------------------------------------------------------------------------
    &,
    &::before,
    &::after {
        box-sizing: border-box;
    }

    display: block;
    position: relative;
    overflow: auto;
    margin: 1em 0;
    box-shadow: var(--box-shadow);

    padding: var(--padding-v, 0) var(--padding-h, 0) !important;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--background);
    color: var(--color);

    // Ready for Flexbox
    // NOTE: Not advised to use display:flex on frame. This rule prevents breaking
    // the layout and allows simple layouts only.
    flex-wrap: wrap;

    // Ready for CSS Grid
    // - Define columns using --grid-rows or grid-template-columns
    // - Define rows using only --grid-rows (not grid-template-rows)
    // - Align vertically using align-items
    // - Align horizontally using justify-items
    grid-template-rows: var(--bar-height) var(--grid-rows);
    grid-template-columns: var(--grid-columns);

    // Bar
    // ---------------------------------------------------------------------------
    &::before {
        content: '';
        display: block;
        height: var(--bar-height);
        margin-top: calc(0px - var(--padding-v, 0px));
        margin-left: calc(0px - var(--padding-h, 0px));
        margin-right: calc(0px - var(--padding-h, 0px));
        margin-bottom: var(--padding-v);
        border-bottom-width: var(--border-width);
        border-bottom-style: inherit;
        border-bottom-color: var(--border-color);
        border-top-left-radius: calc(var(--border-radius) - var(--border-width));
        border-top-right-radius: calc(var(--border-radius) - var(--border-width));
        background: var(--bar-background);

        // Ready for CSS Grid
        grid-column: 1 / -1;
        width: calc(100% + (var(--padding-h, 0px) * 2));
    }

    // Mac
    &.mac {
        &::before {
            background:
            // Button 1
            radial-gradient(
                circle at
                calc(var(--button-inset) + (var(--button-size) * 0.5)) calc(var(--bar-height) / 2),
                var(--button-color, var(--button-color-default, #ff5f57)) calc(var(--button-size) / 2),
                transparent calc(var(--button-size) / 2)
            ),
            // Button 2
            radial-gradient(
                circle at
                calc(var(--button-inset) + (var(--button-size) * 1.5) + var(--button-gap)) calc(var(--bar-height) / 2),
                var(--button-color, var(--button-color-default, #febc2e)) calc(var(--button-size) / 2),
                transparent calc(var(--button-size) / 2)
            ),
            // Button 3
            radial-gradient(
                circle at
                calc(var(--button-inset) + (var(--button-size) * 2.5) + (var(--button-gap) * 2)) calc(var(--bar-height) / 2),
                var(--button-color, var(--button-color-default, #28c840)) calc(var(--button-size) / 2),
                transparent calc(var(--button-size) / 2)
            ),
            var(--bar-background);
        }
    }

    // Windows
    &.win {
        &::before {
            background:
            // Minimize
            // url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='black' fill-opacity='0.2'%3E%3Crect x='0' y='50%25' width='10.2' height='1' /%3E%3C/svg%3E") calc(100% - (var(--button-inset) + (var(--button-size) * 2) + (var(--button-gap) * 2))) no-repeat,
            no-repeat calc(100% - (var(--button-inset) + (var(--button-size) * 2) + (var(--button-gap) * 2))) / var(--button-size) var(--button-size)
            linear-gradient(
                0deg,
                transparent
                calc((var(--button-size) / 2) - (var(--button-stroke-width) / 2)),
                var(--button-color, var(--button-color-default))
                calc((var(--button-size) / 2) - (var(--button-stroke-width) / 2))
                calc((var(--button-size) / 2) + (var(--button-stroke-width) / 2)),
                transparent
                calc((var(--button-size) / 2) + (var(--button-stroke-width) / 2))
            ),
            // Maximize
            // url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='black' fill-opacity='0.2'%3E%3Cpath d='M0,0v10h10V0H0z M9,9H1V1h8V9z' /%3E%3C/svg%3E") calc(100% - (var(--button-inset) + var(--button-size) + var(--button-gap))) no-repeat,
            no-repeat calc(100% - (var(--button-inset) + var(--button-size) + var(--button-gap))) / var(--button-size) var(--button-size)
            linear-gradient(
                0deg,
                var(--button-color, var(--button-color-default))
                var(--button-stroke-width),
                transparent
                var(--button-stroke-width)
                calc(var(--button-size) - var(--button-stroke-width)),
                var(--button-color, var(--button-color-default))
                calc(var(--button-size) - var(--button-stroke-width))
            ),
            no-repeat calc(100% - (var(--button-inset) + var(--button-size) + var(--button-gap))) / var(--button-size) var(--button-size)
            linear-gradient(
                90deg,
                var(--button-color, var(--button-color-default))
                var(--button-stroke-width),
                transparent
                var(--button-stroke-width)
                calc(var(--button-size) - var(--button-stroke-width)),
                var(--button-color, var(--button-color-default))
                calc(var(--button-size) - var(--button-stroke-width))
            ),
            // Close
            // url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='black' fill-opacity='0.2'%3E%3Cpolygon points='10.2,0.7 9.5,0 5.1,4.4 0.7,0 0,0.7 4.4,5.1 0,9.5 0.7,10.2 5.1,5.8 9.5,10.2 10.2,9.5 5.8,5.1' /%3E%3C/svg%3E%0A") calc(100% - var(--button-inset)) no-repeat,
            no-repeat calc(100% - var(--button-inset)) / var(--button-size) var(--button-size)
            linear-gradient(
                45deg,
                transparent
                calc((var(--button-size) * 0.7225) - var(--button-stroke-width)),
                var(--button-color, var(--button-color-default))
                calc((var(--button-size) * 0.7225) - var(--button-stroke-width))
                calc((var(--button-size) * 0.7225) + (var(--button-stroke-width) * 0.7225)),
                transparent
                calc((var(--button-size) * 0.7225) + (var(--button-stroke-width) * 0.7225))
            ),
            no-repeat calc(100% - var(--button-inset)) / var(--button-size) var(--button-size)
            linear-gradient(
                135deg,
                transparent
                calc((var(--button-size) * 0.7225) - var(--button-stroke-width)),
                var(--button-color, var(--button-color-default))
                calc((var(--button-size) * 0.7225) - var(--button-stroke-width))
                calc((var(--button-size) * 0.7225) + (var(--button-stroke-width) * 0.7225)),
                transparent
                calc((var(--button-size) * 0.7225) + (var(--button-stroke-width) * 0.7225))
            ),
            // Custom
            var(--bar-background);
        }
    }

    // Title & URL
    // ---------------------------------------------------------------------------
    &::after {
        content: '';
        position: absolute;
        top: calc(var(--bar-height) / 2);
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
        font-stretch: normal;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        letter-spacing: normal;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        transform: translate(0, -50%);
    }

    // Mac
    &.mac {
        &[data-title],
        &[data-url] {
            &::after {
                right: var(--bar-inset);
            }
        }
    }

    // Windows
    &.win {
        &[data-title],
        &[data-url] {
            &::after {
                left: var(--bar-inset);
            }
        }
    }

    // Centered
    &.centered {
        &[data-title],
        &[data-url] {
            &::after {
                left: 50%;
                right: 0;
                min-width: 40%;
                max-width: 50%;
                text-align: center;
                transform: translate(-50%, -50%);
            }
        }
    }

    // Title attribute
    &[data-title]::after {
        content: attr(data-title);
        left: var(--title-inset);
        right: var(--title-inset);
        color: var(--title-color);
        font-size: var(--title-size);
        font-weight: var(--title-weight);
    }
    &[data-title=""]::after {
        content: var(--title);
    }

    // URL attribute
    &[data-url]::after {
        content: attr(data-url);
        left: var(--url-inset);
        right: var(--url-inset);
        padding: 0 1.25em;
        box-shadow: inset 0 0 0 var(--url-border-width) var(--border-color);
        border-radius: var(--url-border-radius);
        background: var(--url-background);
        color: var(--url-color);
        font-size: 0.8125em;
        line-height: 2em;
        line-height: clamp(
        1.8em,
        calc(var(--bar-height) * 0.575),
        2em
        );
    }
    &[data-url=""]::after {
        content: var(--url);
    }

    // Borderless
    // ---------------------------------------------------------------------------
    &.borderless {
        --padding-h: 0px;
        --padding-v: 0px;

        border: 0;

        &::before {
            margin: 0;
            border: var(--border-width) solid var(--border-color);
            border-top-left-radius: var(--border-radius);
            border-top-right-radius: var(--border-radius);
        }

        > *:only-child {
            display: block;
            max-width: 100%;
            width: 100%;
            margin: 0;
        }
    }

    // <iframe>
    // ---------------------------------------------------------------------------
    > iframe:only-child {
        display: block;
        max-height: none;
        max-width: none;
        width: 100%;
        border: 0;
        margin: 0;
    }

    // Scrolling
    // ---------------------------------------------------------------------------
    &.scrolling {
        display: grid;
        align-items: stretch;
        padding: 0 !important;

        &::before {
            width: auto;
            margin: 0;
        }

        > :only-child {
            overflow: auto;
            padding: var(--padding-v) var(--padding-h);
        }
    }
}