@import "mixins/mixins";
@import "common/var";
@import "mixins/uedStyle.scss";
@import "common/colorPalette";

// 右侧裁剪高度
@function rightClipHeight($size) {
    // 计算公式：头部40px固定值，header：80，筛选区上边距：16，筛选区高度：28，筛选区下边距：16
    @return 40px + uedGrid(80, $size) + uedGrid(16, $size) + uedGrid(28, $size) + uedGrid(16, $size);
};

// 左侧裁剪高度
@function leftClipHeight($size) {
    // 计算公式：头部40px固定值，header：80，筛选区上边距：16，筛选区高度：28，筛选区下边距：16 两侧高度偏差 232px固定值
    @return 40px + uedGrid(80, $size) + uedGrid(16, $size) + uedGrid(28, $size) + uedGrid(16, $size) + 232px;
};

@mixin clipPath($size: "default") {
    .el-background-shade {
        clip-path: polygon(0px leftClipHeight($size), 0px 100%, 100% 100%, 100% rightClipHeight($size));
        &-straight {
            clip-path: polygon(0px rightClipHeight($size), 0px 100%, 100% 100%, 100% rightClipHeight($size));
        }
    }
}

@include b(background) {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    overflow: hidden;
    .el-background-fill {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 0;
        // 为了背景图的展示效果，背景图固化为宽度1920，高度自适应。
        // 宽度不足时，由父级剪切左侧
        .el-background-fill-image {
            position: absolute;
            right: 0;
            width: 100%;
            min-width: 1920px;
            height: auto;
        }
        .el-background-fill-color {
            position: absolute;
            right: 0;
            width: 100%;
            min-width: 1920px;
            height: 100%;
            background-image: linear-gradient(to right, genColor($--color-primary, 5), genColor($--color-primary, 7));
        }
    }
    .el-background-shade {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        background-color: $theme-bg-color;
    }

    @include clipPath('default');

    // 超小尺寸
    &--mini {
        @include clipPath('mini');
    };
    &--small {
        @include clipPath('small');
    };
    // 大尺寸
    &--medium {
        @include clipPath('medium');
    };
}
