@import './themes';
//遍历主题map
@mixin themeify {
    @each $theme-name, $theme-map in $themes {
        //!global 把局部变量强升为全局变量
        $theme-map: $theme-map !global;
        //这步是判断html的data-theme的属性值  #{}是sass的插值表达式
        //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
        [data-theme='#{"" + $theme-name}'] & {
            @content;
        }
    }
}
//声明一个根据Key获取颜色的function
@function themed($key) {
    @return map-get($theme-map, $key);
}
//设置背景颜色
@mixin background_color($color) {
    @include themeify {
        background: themed($color);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}
//设置字体颜色
@mixin font_color($color) {
    @include themeify {
        color: themed($color);
    }
}
//设置边框(默认四边1px)
@mixin border_color($direction: null, $type: solid, $width: 1px, $color: 'border-base') {
    @if ($direction) {
        @include themeify {
            border-#{$direction}: $type $width themed($color);
        }
    } @else {
        @include themeify {
            border: $type $width themed($color);
        }
    }
}
//设置边框颜色
@mixin border_color_only($direction: null, $type: solid, $width: 1px, $color: 'border-base') {
    @if ($direction) {
        @include themeify {
            border-#{$direction}: $type $width themed($color);
        }
    } @else {
        @include themeify {
            border: $type $width themed($color);
        }
    }
}
// 给某个属性设置颜色
@mixin color($attr: 'color', $color: 'primary') {
    @include themeify {
        #{$attr}: themed($color);
    }
}
// 给某个属性设置颜色(rgba)
@mixin color_rgba($attr: 'color', $color: 'primary', $alpha: 1) {
    @include themeify {
        #{$attr}: rgba(themed($color), $alpha);
    }
}
// 给某个属性设置颜色(覆盖)
@mixin color_important($attr: 'color', $color: 'primary') {
    @include themeify {
        #{$attr}: themed($color) !important;
    }
}
@mixin box_shadow($value: '0 0 5px 0', $color: 'color-s', $type: 'outside') {
    @include themeify {
        box-shadow: #{$value} themed($color) #{$type};
    }
}

/* 弹性盒子（传入null不设置该属性） */
@mixin box_flex(
    $width: 100%,
    $height: 100%,
    $direction: row,
    $justify: center,
    $align: center,
    $flex-wrap: null,
    $flex-1: null
) {
    display: flex;

    @if ($width) {
        width: $width;
    }

    @if ($height) {
        height: $height;
    }

    @if ($direction) {
        flex-direction: $direction;
    }

    @if ($justify) {
        justify-content: $justify;
    }

    @if ($align) {
        align-items: $align;
    }

    @if ($flex-wrap) {
        flex-wrap: $flex-wrap;
    }

    @if ($flex-1) {
        flex: $flex-1;
        overflow: hidden;
    }
}

/* 绝对定位  参数顺序：上右下左 */
@mixin box_absolute($width: null, $height: null, $top: null, $right: null, $bottom: null, $left: null, $zIndex: 1) {
    position: absolute;

    @if ($width) {
        width: $width;
    }

    @if ($height) {
        height: $height;
    }

    @if ($left) {
        left: $left;
    }

    @if ($left) {
        left: $left;
    }

    @if ($right) {
        right: $right;
    }

    @if ($top) {
        top: $top;
    }

    @if ($bottom) {
        bottom: $bottom;
    }

    @if ($zIndex) {
        z-index: $zIndex;
    }
}

/* 文本格式化，超出范围，显示省略号 */
@mixin text_overflow($width: 100%, $display: block) {
    display: $display;
    overflow: hidden;
    width: $width;
    text-overflow: ellipsis;
    white-space: nowrap;
}