@use '../../styles/mixins/link';
@use '../../styles/variables';

.thy-layout {
    display: flex;
    flex-direction: column;
    flex: auto;
    height: 100%;
    min-height: 0px;

    &--has-sidebar {
        flex-direction: row;
        &.thy-layout--is-sidebar-right {
            flex-direction: row-reverse;
        }

        // > .thy-layout-content {
        //     overflow-x: hidden;
        // }
        > .thy-layout-content,
        > .thy-layout {
            // 在 flex-direction 为 row 的场景下，内容区域宽度因为被 Flex 布局撑开无法触发横向滚动，必须加 min-width: 0px;
            min-width: 0px;
        }
    }
}

.thy-layout-header {
    display: block;
    flex: 0 0 auto;
    background: variables.$layout-header-background;
    padding: variables.$layout-header-padding;
    height: variables.$layout-header-height;
    align-items: center;
    // line-height: variables.$layout-header-height;

    &.header-has-border,
    &.thy-layout-header-divided {
        border-bottom: 1px solid variables.$nav-border-color;
    }

    &.thy-layout-header-shadow {
        box-shadow: variables.$layout-header-box-shadow;
        // 添加 relative 和 z-index 让阴影不被下面的元素遮住
        position: relative;
        z-index: 2;
    }
}

.thy-layout-content {
    flex: auto; // = 1 1 auto
    display: flex;
    flex-direction: column;
    padding: variables.$layout-content-padding;
    background: variables.$layout-content-background;
    overflow-y: auto;

    .thy-layout-content-section {
        display: block;
        // overflow: hidden;
        border-radius: variables.$layout-content-section-border-radius;
        background: variables.$layout-content-section-background;
        margin-bottom: variables.$layout-content-section-margin-bottom;
    }

    .thy-layout-content-main {
        display: flex;
        flex-direction: column;
        flex: auto;
        background: variables.$layout-content-section-background;
    }

    // &--align-title {
    //     padding-left: 30px;
    //     padding-right: 30px;
    // }
}

.thy-layout-sidebar {
    flex: 0 0 auto;
    position: relative;
    transition: width 0.2s;
    min-width: 0;
    width: variables.$layout-sidebar-width;
    border-right: variables.$layout-sidebar-border-right;
    display: flex;
    flex-direction: column;
    background: variables.$bg-default;

    &.sidebar-theme-light {
        background: variables.$layout-sidebar-background-light;
    }

    &.sidebar-theme-dark {
        background: variables.$layout-sidebar-background-dark;
    }

    .sidebar-header {
        padding: variables.$layout-sidebar-header-padding;
        min-height: variables.$layout-sidebar-header-height;
        align-items: center;
        display: flex;
        flex-direction: row;

        &.sidebar-header-divided {
            border-bottom: 1px solid variables.$layout-sidebar-border-color;
        }
        .title {
            color: variables.$body-color;
            font-size: variables.$layout-sidebar-header-title-font-size;
            flex-grow: 1;
        }

        .operation {
            .thy-action:last-child {
                margin-right: -8px;
            }

            .thy-action + .thy-action {
                margin-left: 4px;
            }

            .action {
                margin-right: 4px;
            }
        }
    }

    .sidebar-content {
        flex: auto;
        height: 100%;
        overflow: auto;

        .search-container {
            padding: 0 20px 10px 20px;
        }
    }

    .sidebar-footer {
        padding: 0 10px;
        border-top: 1px solid variables.$layout-sidebar-border-color;
        min-height: variables.$layout-sidebar-footer-height;
        align-items: center;
        display: flex;
        flex-direction: row;
    }

    .sidebar-drag {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        // display: contents;
    }

    .thy-resizable-resizing {
        transition: none;
    }
    .sidebar-resize-handle {
        // position: absolute;
        // cursor: ew-resize;
        // transition: none;
        // right: -2px;
        // width: 2px;
        z-index: variables.$z-index-6;
    }

    .sidebar-collapse-line {
        position: absolute;
        top: 0;
        right: -2px;
        bottom: 0;
        width: 2px;
        transition: background 0.2s;

        &:hover {
            + .sidebar-collapse {
                visibility: visible;
            }
        }
        &::after {
            width: 20px;
            height: 100%;
            position: absolute;
            right: -10px;
            top: 0;
            content: '';
        }
    }

    .sidebar-collapse {
        visibility: hidden;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: (variables.$layout-sidebar-header-height - variables.$icon-default-height) * 0.5; /* 按照 layout-header 高度（48px）居中 ((48-24) / 2) */
        width: variables.$icon-default-width;
        height: variables.$icon-default-height;
        right: 0;
        transform: translateX(50%);
        color: variables.$gray-600;
        background-color: variables.$bg-float;
        border-radius: 50%;
        box-shadow: variables.$float-btn-box-shadow;
        z-index: variables.$z-index-6;
        &:hover {
            visibility: visible;
            cursor: variables.$hand-cursor;
            background-color: variables.$primary;
            .sidebar-collapse-icon {
                color: variables.$white;
            }
        }
        &.collapse-visible {
            visibility: visible;
        }
        &.collapse-hidden {
            visibility: hidden;
        }
    }

    .sidebar-collapse-icon svg {
        font-size: 12px;
    }

    &--clear-border-right {
        border-right: none;
    }

    &.thy-layout-sidebar-isolated {
        margin-right: 10px;
        border-right: none;
    }
    &.sidebar-collapse-show {
        .sidebar-collapse {
            visibility: visible;
        }
    }
    &.remove-transition {
        transition: none;
    }

    &.thy-layout-sidebar-right {
        border-right: none;
        border-left: variables.$layout-sidebar-border-right;

        .sidebar-collapse-line {
            left: -2px;
            right: auto;
        }

        .sidebar-collapse {
            left: 0;
            right: auto;
            transform: translateX(-50%);
            .sidebar-collapse-icon {
                transform: rotate(180deg);
            }
        }

        &.thy-layout-sidebar-isolated {
            margin-left: 10px;
            border-left: none;
        }

        &.thy-layout-sidebar--clear-border-left {
            border-left: none;
        }
    }
}

.thy-layout-header {
    display: flex;

    .layout-header-title {
        font-size: variables.$font-size-md;
        color: variables.$gray-800;
        display: flex;
        align-items: center;
        flex: 0 0 auto;

        .title-name {
            &:not(:last-child) {
                margin-right: 4px;
            }
            .thy-icon {
                margin-left: 8px;
                color: variables.$gray-600;
            }
        }

        a.title-name {
            @include link.link-variant(variables.$gray-800, none, variables.$primary, none);
            &:hover {
                .thy-icon {
                    color: variables.$primary;
                }
            }
            &.prefix-icon {
                &:hover {
                    opacity: variables.$layout-header-icon-link-opacity;
                }
            }
        }

        .title-separator {
            color: variables.$layout-header-separator-color;
            padding: 4px;
        }

        .prefix-icon {
            margin-right: 4px;
            // padding: 5px;
            color: variables.$primary;
            font-size: variables.$layout-header-prefix-icon-size;
            .thy-icon {
                font-size: variables.$layout-header-prefix-icon-size;
            }
        }

        // 图标后面跟标题，标题加 8px 的间距
        .prefix-icon + .title-name {
            margin-left: 8px;
        }

        // 分割线后面跟的是标题加 4px 的间距，保证最终是8px间距
        .title-separator + .title-name {
            margin-left: 4px;
        }

        .suffix-icon {
            margin-left: 8px;
            color: variables.$primary;
        }
    }

    .layout-header-content {
        flex: auto;
    }

    .layout-header-operation {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
    }
}

.thy-layout-header-sm {
    height: variables.$layout-header-height-sm;
    line-height: variables.$layout-header-height-sm;
}

.thy-layout-header-lg {
    height: variables.$layout-header-height-lg;
    line-height: variables.$layout-header-height-lg;
}

.thy-layout-header-xlg {
    height: variables.$layout-header-height-xlg;
    line-height: variables.$layout-header-height-xlg;
}
