/* ╭────────────────────────────────────────────╮
/  │           _           _                    │
/  │ __      _(_)_ __   __| | _____      _____  │
/  │ \ \ /\ / / | '_ \ / _` |/ _ \ \ /\ / / __| │
/  │  \ V  V /| | | | | (_| | (_) \ V  V /\__ \ │
/  │   \_/\_/ |_|_| |_|\__,_|\___/ \_/\_/ |___/ │
/  ╰────────────────────────────────────────────╯
/  windows - related styling for the windows on pages */

.window {
    background-color: var(--background);
    border-radius: 2rem .6rem 2rem .6rem;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: var(--foreground);
    outline: var(--accent) solid .15rem;
    overflow: clip;
    transition: .2s;

    &:hover {
        outline: var(--accent) solid .5rem;
        transition: .2s;
    }

    .header {
        background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
        border-bottom: .1rem solid var(--accent);
        display: inline-flex;
        min-width: 100%;
        overflow: clip;
        text-align: center;
        vertical-align: middle;

        titlebar-icon {
            background: color-mix(in srgb, var(--accent) 30%, transparent);
            border-bottom-right-radius: 1rem;
            border-bottom: .2rem solid var(--accent);
            border-right: .2rem solid var(--accent);
            margin-bottom: -.2rem;
            padding: .4rem .3rem .4rem 1rem;
        }

        a {
            align-self: center;
            padding-left: .5rem;
            text-decoration: none;
            color: var(--foreground);
        }

        a:hover {
            text-decoration: underline;
        }

        window-controls {
            display: flex;
            flex-direction: row;
            margin: auto 0 auto auto;
            align-items: center;
            gap: .4rem;

            icon-tabler[minimize], icon-tabler[maximize] {
                cursor: not-allowed;
            }
        }

        close-button {
            background: color-mix(in srgb, var(--accent) 30%, transparent);
            border-bottom-left-radius: 1rem;
            border-bottom: .2rem solid var(--accent);
            border-left: .2rem solid var(--accent);
            cursor: pointer;
            margin-bottom: -.2rem;
            padding: .5rem .3rem .4rem .4rem;
            transition: .2s;

            &:hover {
                background: var(--red);
                icon-tabler { background-color: var(--background); }
            }
        }
    }

    section, article {
        padding: .8rem;
    }

    @media screen and (max-width: 60rem) {
        &:not(#footer) {
            .header {
                titlebar-icon {
                    padding: .3rem .4rem .3rem .4rem;
                }

                window-controls {
                    icon-tabler[minimize], icon-tabler[maximize] {
                        display: none !important;
                    }

                    close-button {
                        padding: .4rem .3rem .3rem .4rem;
                    }
                }
            }

            main, section, article {
                padding: .5rem;
            }

            border-bottom: var(--accent) solid .15rem;
            border-left: unset !important;
            border-radius: unset !important;
            border-right: unset !important;
            border-top: var(--accent) solid .15rem;
        }
    }
}