@import "../utilities/utilities.scss";

.azui {
    &.azWindow {
        box-sizing: border-box;
        background-color: white;
        // display: grid;
        display: flex;
        flex-direction: column;
        box-shadow: $shadow;

        &:hover {
            box-shadow: $shadow-hovered;
        }

        &.active {
            &>.azWindowHeader {
                background-color: $more-active;

                @media (hover: hover) {
                    &:hover {
                        background-color: $more-active;
                    }
                }
            }
        }

        &.inactive {
            & .azWindowHeader {
                background-color: $main-color;
            }

            & .active {
                &>.azWindowHeader {
                    background-color: $active;
                }
            }

            & .azDocker .azSortableItem {
                background-color: $main-color;

                &.dock-active {
                    background-color: $active;
                }
            }
        }

        &>.azWindowHeader {
            box-sizing: border-box;
            width: 100%; // display: inline-block;
            // align-items: center;
            // grid-row: 1/2;
            padding: 6px;
            font-size: 12px;

            transition: 0.5s;
            transition-property: background-color;

            background-color: $main-color;

            @media (hover: hover) {
                &:hover {
                    background-color: $less-active;
                }
            }

            span.azHeaderIcon {
                cursor: pointer;
                display: inline-block;
                text-align: center;
                width: 24px;
                height: 24px;

                &::before {
                    content: "";
                    display: inline-block;
                    vertical-align: middle;
                    height: 100%;
                }

                &:hover {
                    border: 1px solid $less-active;
                }

                & svg {
                    width: 8px;
                    height: 8px;
                }
            }

            .left {
                white-space: nowrap;
                float: left;
                height: 100%;
                text-align: left;

                &::before {
                    content: "";
                    display: inline-block;
                    vertical-align: middle;
                    height: 100%;
                }

                & span.title {
                    cursor: default;
                    user-select: none;
                }

                & span.icon {
                    padding: 8px;
                    cursor: default;
                    font-size: 18px;

                    & svg {
                        width: 12px;
                        height: 12px;
                        position: relative;
                        top: 2px;
                    }
                }
            }

            .center {
                display: inline-block;
                height: 100%;
                text-align: center;
            }

            .right {
                &::before {
                    content: "";
                    display: inline-block;
                    vertical-align: middle;
                    height: 100%;
                }

                float: right;
                height: 100%;
                text-align: right;
            }
        }

        &>.azWindowContent {
            position: relative;
            width: 100%;
            height: 100%;
            // grid-row: 2/3;
            overflow: hidden; // box-sizing: border-box;
        }
    }
}