$font-size0: 20;
$step: 2;
$dirlist: top,
    bottom,
    left,
    right;

$colors: (
    theme,
    $color-theme),
    (white, $color-white),
    (money, $color-money),
    (green, $color-green),
    (1, $color-1),
    (2, $color-2),
    (3, $color-3),
    (4, $color-4),
    (line, $color-line),
    (mask, $color-mask
);

.color-white2 {
    color: rgba($color: #fff, $alpha: 0.8);
}

@each $name,
$color in $colors {
    .color-#{"" + $name} {
        color: $color;
    }

    .bgcolor-#{"" + $name} {
        background-color: $color;
    }
}

.bgcolor-transparent {
    background: transparent !important;
}

/*! font-size */

.font-size-inherit {
    font-size: inherit;
}

@for $i from 0 through 20 {
    .font#{$i} {
        font-size: ($font-size0 + $i * $step)+#{$unit};
    }
}

.marginXauto {
    margin-left: auto;
    margin-right: auto;
}

$i: 50;

@while $i>-1 {
    .marginL#{$i} {
        margin-left: #{$i * $step}#{$unit};
    }

    .marginR#{$i} {
        margin-right: #{$i * $step}#{$unit};
    }

    .marginT#{$i} {
        margin-top: #{$i * $step}#{$unit};
    }

    .marginB#{$i} {
        margin-bottom: #{$i * $step}#{$unit};
    }

    .marginY#{$i} {
        margin-top: #{$i * $step}#{$unit};
        margin-bottom: #{$i * $step}#{$unit};
    }

    .marginX#{$i} {
        margin-left: #{$i * $step}#{$unit};
        margin-right: #{$i * $step}#{$unit};
    }

    .margin#{$i} {
        margin: #{$i * $step}#{$unit};
    }

    .paddingL#{$i} {
        padding-left: #{$i * $step}#{$unit};
    }

    .paddingR#{$i} {
        padding-right: #{$i * $step}#{$unit};
    }

    .paddingT#{$i} {
        padding-top: #{$i * $step}#{$unit};
    }

    .paddingB#{$i} {
        padding-bottom: #{$i * $step}#{$unit};
    }

    .paddingY#{$i} {
        padding-top: #{$i * $step}#{$unit};
        padding-bottom: #{$i * $step}#{$unit};
    }

    .paddingX#{$i} {
        padding-left: #{$i * $step}#{$unit};
        padding-right: #{$i * $step}#{$unit};
    }

    .padding#{$i} {
        padding: #{$i * $step}#{$unit};
    }

    $i: $i - 1;
}

.padding0force {
    padding: 0 !important;
}

.margin0force {
    margin: 0 !important;
}

/*! opacity */

$i: 10;

@while $i>=0 {
    .opacity_#{$i} {
        opacity: 0.1 * $i;
    }

    $i: $i - 1;
}


/*! border */

.border-none {
    border: none;
}

.border1 {
    border: #{1}#{$unit} solid $color-line;
}

.border1theme {
    border: #{1}#{$unit} solid $color-theme;
}

.border1white {
    border: #{1}#{$unit} solid $color-white;
}

.border1-transparent {
    border: #{1}#{$unit} solid transparent;
}

@each $dir in $dirlist {
    .border-#{$dir}1 {
        border-#{$dir}: #{1}#{$unit} solid $color-line;
    }

    .border-#{$dir}-dash {
        border-#{$dir}: #{1}#{$unit} dashed $color-line;
    }
}

/*! border-radius */

.border-radius50 {
    border-radius: 50%;
}

.border-radius100 {
    border-radius: 100%;
}

$i: 20;

@while $i>-1 {
    .radius#{$i} {
        border-radius: #{$i * $step}#{$unit};
    }

    $i: $i - 1;
}

/*! float */

.float-left {
    float: left;
}

.float-right {
    float: right;
}

/*! width */

.width25 {
    width: 25%;
}

.width33 {
    width: 33.3%;
}

.width50 {
    width: 50%;
}

.width100 {
    width: 100%;
}


/*! height */

.height100 {
    height: 100%;
}

/*! display */

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.display-none {
    display: none;
}


/*! position */

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.translateX {
    left: 50%;
    transform: translateX(-50%);
}

.translateY {
    top: 50%;
    transform: translateY(-50%);
}

.translateXY {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/*! text-align */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.line-through {
    text-decoration: line-through;
}

.underline {
    text-decoration: underline !important;
}

/*! flex */

.flex {
    display: flex;
}

.flex1 {
    flex: 1
}

.flex-center {
    display: flex;
    justify-content: center;
}

.flex-align {
    display: flex;
    align-items: center;
}

.flex-align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-dx {
    overflow-x: auto;
    overflow-y: hidden;
}

.flex-align-start {
    display: flex;
    justify-content: flex-start;
    align-content: center;
}

.flex-center-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.flex-align-end {
    display: flex;
    justify-content: flex-end;
    @extend .flex-align;
}

.flex-baseline {
    display: flex;
    align-items: baseline;
}

.flex-around {
    display: flex;
    justify-content: space-around;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.flex-align-around {
    @extend .flex-align;
    @extend .flex-around;
}

.flex-align-between {
    @extend .flex-align;
    @extend .flex-between;
}

.flex-baseline-around {
    @extend .flex-baseline;
    @extend .flex-around;
}

.flex-baseline-between {
    @extend .flex-baseline;
    @extend .flex-between;
}

.flex-nowrap {
    display: flex;
    flex-wrap: nowrap;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-column-between {
    @extend .flex-column;
    justify-content: space-between;
}

.flex-column-around {
    @extend .flex-column;
    justify-content: space-around;
}

.flex-column-align {
    @extend .flex-column;
    justify-content: center;
}

.flex-column-align-center {
    @extend .flex-column-align;
    align-items: center;
}

.flex-column-center {
    @extend .flex-column;
    align-items: center;
}

.itemflex-00auto {
    flex: 0 0 auto;
}

.itemflex-11auto {
    flex: 1 1 auto;
}

.flex-shrink0 {
    flex-shrink: 0;
}

.self-stretch {
    align-self: stretch;
}

/*! word-break */

.break-all {
    word-break: break-all;
}

.break-word {
    word-break: break-word;
}


/* white-space */

.pre-wrap {
    white-space: pre-wrap;
}

.nowrap {
    white-space: nowrap;
}


/*! scroll */

.scroll-x {
    overflow-x: scroll;
}

.scroll-y {
    overflow-y: scroll;
}

.scroll-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.line-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*! other */

.bold {
    font-weight: bold;
}

.oblique {
    font-style: oblique
}

.clear {
    overflow: hidden;
}

.clear-both {
    clear: both;
}

.visibility-visible {
    visibility: visible;
}

.visibility-hidden {
    visibility: hidden;
}

.padding-bottom-save {
    padding-bottom: env(safe-area-inset-bottom);
}

.padding-bottom-tabbar {
    padding-bottom: calc(128rpx + env(safe-area-inset-bottom))
}

.btn.button-hover {
    transform: translate(1rpx, 1rpx);
}

.btn-clear {
    background: transparent;
    line-height: normal;

    &::after {
        border: 0 !important;
    }
}

.btn-clear::after {
    border: none
}

.bottom-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}

.bgcolor-linear1 {
    background: linear-gradient(270deg, #d070ff 0%, #8b3dff 100%)
}

.cm-btn {
    @extend .flex-align-center;
    @extend .bgcolor-linear1;
    color: #fff;
    padding: 0;
    margin: 0;
    line-height: normal;

    &::after {
        border: 0 !important;
    }

    &.button-hover {
        transform: translate(1rpx, 1rpx);
    }

    &.cm-size {
        height: 96rpx;
        border-radius: 48rpx;
        font-size: 30rpx;
    }

    &.disabled {
        background: #F0F0F0;
        box-shadow: none;
        color: #999999;
    }

    &.no-shadow {
        box-shadow: none !important;
    }
}

.cm-plain-btn {
    @extend .flex-align-center;
    color: $color-theme;
    background: transparent;
    border: 2rpx solid $color-theme;
    padding: 0;
    margin: 0;
    line-height: normal;

    &::after {
        border: 0 !important;
    }

    &.button-hover {
        transform: translate(1rpx, 1rpx);
    }

    &.cm-size {
        height: 64rpx;
        border-radius: 48rpx;
        font-size: 28rpx;
    }

    &.info {
        color: #000;
        border: 2rpx solid #D8D8D8;
    }
}