@use "sass:color"
@import "../common.sass"

@mixin appkit-window-frame()
    @include blur-behind(40px, 10px)
    border-radius: 10px
    box-shadow: 0px 8px 40px rgba(0, 0, 0, 0.8), 0px 0px 6px rgba(0, 0, 0, 0.55)
    background: rgba(20, 20, 20, 0.692)
    &::after
        content: ""
        left: 0
        top: 0
        right: 0
        bottom: 0
        position: absolute
        border-radius: 10px
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2)
        pointer-events: none

.appkit-window
    @include pingfang-font
    @include appkit-window-frame
    color: white
    display: flex
    user-select: none
    font-style: normal
    font-size: 11px
    font-weight: 400
    max-height: 100vh
    max-width: 100vw
    overflow: hidden
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale

    ::-webkit-scrollbar-track
        background: transparent
        &:hover
            background: transparent

    ::-webkit-scrollbar
        background-color: transparent
        width: 20px

    ::-webkit-scrollbar-thumb
        border: solid 6px transparent
        box-shadow: inset 0 0 0 1px #FFFFFF0D, inset 0 0 0 6px #FFFFFF1D
        border-radius: 10px
        background: transparent
        &:hover
            background: transparent

    .spacer
        flex: 1

    .window-sidebar
        flex: 0
        display: flex
        flex-direction: column
        margin-bottom: 17px

        .sidebar-item
            font-weight: 400
            font-size: 13px
            line-height: 16px
            margin: 0px 17px
            white-space: nowrap

            > *
                padding: 6px 7px
                border-radius: 5px

            &.selected > *
                background: linear-gradient(0deg, rgba(10, 130, 255, 0.75), rgba(10, 130, 255, 0.75)), #0A82FF

    .window-sidebar-devider
        width: 1px
        min-width: 1px
        background: rgba(255, 255, 255, 0.1)
        box-shadow: -1px 0px 0.5px rgba(0, 0, 0, 0.05)

    .window-content
        background: rgba(20, 20, 20, 0.6)
        flex: 1
        min-width: 0
        min-height: 0
        display: flex
        flex-direction: column

        .window-content-inner
            flex: 1
            min-height: 0
            min-width: 0

            > *
                position: relative
                overflow: auto scroll
                width: 100%
                height: 100%

                > *
                    max-width: 100%
                    height: fit-content
                    overflow: unset
                    margin: 0 0 20px 20px

    .window-controls-content
        flex: 0
        display: flex
        min-height: 52px
        align-items: center

        &.small
            min-height: 24px
    // 小窗口
    .title
        margin: 0 30px
        font-size: 15px
        font-weight: 590
        min-width: 0
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap

    .window-traffic-lights-spacer
        width: 64px

    .appkit-traffic-lights
        position: absolute
        display: flex
        margin: 20px
        // 大窗口
        &:hover > button
            &.close
                background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 0.5L5.5 5.5M5.5 0.5L0.5 5.5' stroke='black' stroke-opacity='0.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")

            &.minimize
                background-image: url("data:image/svg+xml,%3Csvg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 1H7.25' stroke='black' stroke-opacity='0.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")

            &.zoom
                background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.49999 -1.35601e-05L-6.78003e-06 4.49999V-6.78003e-06L4.49999 -1.35601e-05Z' fill='black' fill-opacity='0.5'/%3E%3Cpath d='M1.49999 5.99999L5.99999 1.49999L6 6L1.49999 5.99999Z' fill='black' fill-opacity='0.5'/%3E%3C/svg%3E%0A")

        &.small
            margin: 6px
        // 小窗口
        button
            display: block
            border: 0.5px solid rgba(0, 0, 0, 0.2)
            height: 12px
            width: 12px
            margin-right: 8px
            border-radius: 6px
            background-position: center
            background-repeat: no-repeat
            padding: 0
            cursor: pointer

            $close-color: #FF5F57
            $minimize-color: #FEBC2E
            $zoom-color: #28C840

            @mixin btn($btn-color)
                background-color: $btn-color
                &:active
                    background-color: color.adjust($btn-color, $blackness: 20%)

            &.close
                @include btn($close-color)

            &.minimize
                @include btn($minimize-color)

            &.zoom
                @include btn($zoom-color)

    &.no-title
        .window-sidebar
            padding-top: 17px

        .window-content-inner > * > *
            margin: 20px 0 20px 20px
