@layout-prefix-cls: ~"@{css-prefix}layout";

.@{layout-prefix-cls} {
    display: flex;
    flex-direction: column;
    flex: auto;
    background: @color-bg-layout;

    &&-has-sider {
        flex-direction: row;
        > .@{layout-prefix-cls},
        > .@{layout-prefix-cls}-content {
          overflow-x: hidden;
        }
    }

    &-header {
        top:0;
        left:0;
        flex: 0 0 auto;
        background: @layout-header-background;
        padding: @layout-header-padding;
        height: @layout-header-height;
        line-height: @layout-header-height;
    }

    &-sider {
        position:relative;
        transition: all .2s @ease-in-out;
        background: @layout-sider-background;

        min-width: 0;

        &-children {
            height: 100%;
            padding-top: 0.1px;
            margin-top: -0.1px;
        }

        &-has-trigger {
            padding-bottom: @layout-trigger-height;
        }

        &-trigger {
            position: absolute;
            text-align: center;
            width:@layout-trigger-width;
            right:-@layout-trigger-width;
            top: 50%;
            transform:translateY(calc(~"-@{layout-trigger-height} / 2"));
            cursor: pointer;
            height: @layout-trigger-height;
            line-height: @layout-trigger-height;
            color: @layout-trigger-color;
            background: @layout-sider-background;
            background-color:@color-complementary-6;
            z-index: 1000;
            border-top-right-radius:@layout-trigger-radius;
            border-bottom-right-radius: @layout-trigger-radius;
            transition: all .2s @ease-in-out;
            .haloe-layout-icon {
              transform-origin: center center;
              transform: translateX(calc(-@layout-trigger-width / 4));
              width:0;
              height:0;
              display:inline-block;
              border:calc(@layout-trigger-width / 2) solid @layout-header-background;
              border:calc(@layout-trigger-width / 2) solid @color-complementary-4;
              border-top-color: transparent;
              border-bottom-color: transparent;
              border-left-color: transparent;
            }
            >* {
                transition: all .2s;
            }
            &-collapsed {
                .@{layout-prefix-cls}-sider-trigger-icon {
                    transform: rotateZ(180deg) translate(calc(-@layout-trigger-width / 4));
                }
            }
        }

        &-zero-width {
            & > * {
                overflow: hidden;
            }

            &-trigger {
                position: absolute;
                top: -@layout-header-height;
                left:0;
                text-align: center;
                width: @layout-zero-trigger-width;
                height: @layout-zero-trigger-height;
                line-height: @layout-zero-trigger-height;
                background: @layout-zero-trigger-color;
                color: @color-functional-white;
                font-size: calc(@layout-zero-trigger-width / 2);
                border-radius: 0 @border-radius-base @border-radius-base 0;
                cursor: pointer;
                transition: background .3s ease;

                &&-left {
                    right: 0;
                    left: -@layout-zero-trigger-width;
                    border-radius: @border-radius-base 0 0 @border-radius-base;
                }
            }
        }
    }

    &-footer {
        background: @color-bg-layout-content;
        padding: @layout-footer-padding;
        // height: @layout-footer-height;
        color: @text-color;
        font-size: @font-size-base;
        flex:0;
    }

    &-content,&-title {
        flex: auto;
        background-color: @color-bg-layout-content;
    }
    &-content{
      margin:@layout-content-margin;
    }
    &-title{
      flex:0;
      height:@layout-title-height;
      line-height:@layout-title-height;
    }
}