@import 'mixins/mixins';
@import 'common/var';

// ***************布局相关原子样式start********************
$layoutValueList: 0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40;
$layoutTypeList: l, r, t, b, x, y;
$x: left, right;
$y: top, bottom;
$layoutTypeMap: (
    l: left,
    r: right,
    t: top,
    b: bottom,
    x: $x,
    y: $y
);

@each $layoutValue in $layoutValueList {
    @each $layoutType in $layoutTypeList {
        .m#{$layoutType}-#{$layoutValue} {
            @each $value in map-get($layoutTypeMap, $layoutType) {
                margin-#{$value}: #{$layoutValue}px;
            }
        }
        .p#{$layoutType}-#{$layoutValue} {
            @each $value in map-get($layoutTypeMap, $layoutType) {
                padding-#{$value}: #{$layoutValue}px;
            }
        }
    }
    .m-#{$layoutValue} {
        margin-left: #{$layoutValue}px;
        margin-right: #{$layoutValue}px;
        margin-top: #{$layoutValue}px;
        margin-bottom: #{$layoutValue}px;
    }
    .p-#{$layoutValue} {
        padding-left: #{$layoutValue}px;
        padding-right: #{$layoutValue}px;
        padding-top: #{$layoutValue}px;
        padding-bottom: #{$layoutValue}px;
    }
}
// special
.mb-48 {
    margin-bottom: 48px;
}
.mb-60 {
    margin-bottom: 60px;
}
.pb-80 {
    padding-bottom: 80px;
}
// ***************布局相关原子样式end********************
// ***************文字相关原子样式start********************
$fontSizeList: 12, 14, 16, 18, 20, 24, 30, 38, 46, 56, 68, none;
$fontWeightList: normal, bold, none;
$fontColorList: primary, sub, tip, theme, 'white', disable, 'red', 'orange', 'green';
$colorMap: (
    primary: $--color-text-primary,
    sub: $--color-text-regular,
    tip: $--color-text-secondary,
    theme: $--color-primary,
    'white': $--color-white,
    disable: $--color-text-placeholder,
    'red': $--color-danger,
    'orange': $--color-warning,
    'green': $--color-success,
);
@each $fontSize in $fontSizeList {
    $textName: text;
    @if $fontSize == none {
        $fontSizeName: $textName !global;
        .#{$fontSizeName} {
            line-height: 1.5;
        }
    } @else {
        $fontSizeName: $textName + '-' + $fontSize !global;
        .#{$fontSizeName} {
            font-size: #{$fontSize}px;
            line-height: 1.5;
        }
    }
    @each $fontWeight in $fontWeightList {
        @if $fontWeight == none {
            $fontWeightName: $fontSizeName !global;
        } @else {
            $fontWeightName: $fontSizeName + '-' + $fontWeight !global;
            .#{$fontWeightName} {
                @extend .#{$fontSizeName};
                font-weight: 700;
            }
        }
        @each $fontColor in $fontColorList {
            $fontColorName: $fontWeightName + '-' + $fontColor !global;
            .#{$fontColorName} {
                @extend .#{$fontWeightName};
                color: map-get($colorMap, $fontColor);
            }
        }
    }
}
// ***************文字相关原子样式end********************
// ***************flex相关原子样式start******************
$justifyContentList: start, end, between, around, center;
$justifyContentMap: (
    start: flex-start,
    end: flex-end,
    between: space-between,
    around: space-around,
    center: center
);
$alignItemsList: start, end, center, stretch;
$alignItemsMap: (
    start: flex-start,
    end: flex-end,
    stretch: stretch,
    center: center
);
$flexDirectionList: row, column;
$flexWrapList: nowrap, wrap;
@each $flexDirection in $flexDirectionList {
    $flexName: flex !global;
    @if $flexDirection == column {
        $flexColumnName: $flexName + -column !global;
        .#{$flexColumnName} {
            display: flex;
            flex-direction: column;
        }
    } @else {
        $flexColumnName: $flexName !global;
        .#{$flexColumnName} {
            display: flex;
        }
    }
    @each $flexWrap in $flexWrapList {
        @if $flexWrap == wrap {
            .#{$flexColumnName + -wrap} {
                @extend .#{$flexColumnName};
                flex-wrap: wrap;
            }
            $flexWrapName: $flexColumnName + -wrap !global;
        } @else {
            $flexWrapName: $flexColumnName !global;
        }
        @each $justifyContent in $justifyContentList {
            .#{$flexWrapName + '-' + $justifyContent} {
                @extend .#{$flexWrapName};
                justify-content: map-get($justifyContentMap, $justifyContent);
            }
            $flexJustifyName: $flexWrapName + '-' + $justifyContent !global;
            @each $alignItems in $alignItemsList {
                .#{$flexJustifyName + '-' + $alignItems} {
                    @extend .#{$flexJustifyName};
                    align-items: map-get($alignItemsMap, $alignItems);
                }
            }
        }
    }
}
.inline-flex {
    display: inline-flex;
}
.flex-grow {
    flex-grow: 1;
}
.flex-no-shrink {
    flex-shrink: 0;
}
// ***************flex相关原子样式end********************
// ***************其它原子样式start********************
// position
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.fixed {
    position: fixed;
}
.static {
    position: static;
}
// display
.none {
    display: none;
}
.block {
    display: block;
}
.inline {
    display: inline;
}
.inline-block {
    display: inline-block;
}
// text-align
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
// vertical-align
.vertical-middle {
    vertical-align: middle;
}
.vertical-text-bottom {
    vertical-align: text-bottom;
}
// ellipsis
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
}
//border
.br {
    border: 1px solid $--border-color-lighter;
}
.br-t {
    border-top: 1px solid $--border-color-lighter;
}
.br-b {
    border-bottom: 1px solid $--border-color-lighter;
}
.br-l {
    border-left: 1px solid $--border-color-lighter;
}
.br-r {
    border-right: 1px solid $--border-color-lighter;
}
.br-theme {
    border: 1px solid $--color-primary;
}
.br-hover {
    @extend .br;
    cursor: pointer;
    &:hover {
        @extend .br-theme;
    }
}
.br-theme-selected {
    @extend .br-theme;
    cursor: pointer;
    &:hover {
        background: $--color-primary-light-9;
    }
}
.br-icon-selected {
    @extend .br-theme;
    cursor: pointer;
    position: relative;
    &::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       display: block;
       width: 32px;
       height: 32px;
       background: url('https://js.dingdandao.com/library/d-element-ui/img/border-selected.png') no-repeat; 
    }
}
// 单个弹窗按钮宽
.w-160 {
    width: 160px;
}
// 置底按钮宽
.w-136 {
    width: 136px;
}
.w-100 {
    width: 100px;
}
.w-120 {
    width: 120px;
}
.w-300 {
    width: 300px;
}
.shadow {
    box-shadow: $--regular-shadow-b;
}
.shadow-small {
    box-shadow: $--small-shadow-b;
}
.w-full {
    width: 100%;
}
.h-full {
    height: 100%;
}
.full {
    width: 100%;
    height: 100%;
}
// background
.bg-main {
    background: $--background-color-base;
}
.bg-white {
    background: $--color-white;
}
// overflow
.overflow-hidden {
    overflow: hidden;
}
.overflow-auto {
    overflow: auto;
}
.overflow-visible {
    overflow: visible;
}
.pointer {
    cursor: pointer;
}
.cursor {
    color: $--color-primary;
    cursor: pointer;
}
.not-allowed{
    cursor: not-allowed;
}
.text-link{
    color: $--color-primary;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    &:hover{
        text-decoration: underline;
    }
}
.text-line-through{
    text-decoration: line-through;
}
// ***************其它原子样式end**********************
.radius-2 {
    border-radius: 2px;
}
.radius-4 {
    border-radius: 4px;
}
.aliIcon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    overflow: hidden;
}
.aliIcon-small {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    fill: currentColor;
    overflow: hidden;
}
.text-underline {
    text-decoration: underline;
}
.text-through {
    text-decoration: line-through;
}
.ml-4 {
    margin-left: 4px;
}
.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}
.flex-3 {
    flex: 3;
}
.flex-4 {
    flex: 4;
}
.flex-5 {
    flex: 5;
}
.flex-6 {
    flex: 6;
}
.flex-7 {
    flex: 7;
}
.flex-8 {
    flex: 8;
}
.flex-9 {
    flex: 9;
}
// 圆点
@each $wh in 4, 6, 8, 12, 16, 20, 24, 28, 32, 36, 40 {
    .point-#{$wh} {
        display: inline-block;
        width: #{$wh}px;
        height: #{$wh}px;
        border-radius: #{$wh}px;
        background: $--color-danger;
    }
}

