@import '../var.scss';

/**
*********************************************
* 边框处理
*********************************************
*/


/* -- 实线 细 -- */


.solid,
.solid-bottom,
.solid-left,
.solid-right,
.solid-top,

/* -- 虚线 细 -- */

.dashed,
.dashed-bottom,
.dashed-left,
.dashed-right,
.dashed-top,

/* -- 虚线 粗 -- */


.dasheds,
.dasheds-bottom,
.dasheds-left,
.dasheds-right,
.dasheds-top,

/* -- 实线 粗 -- */

.solids,
.solids-bottom,
.solids-left,
.solids-right,
.solids-top {
    position: relative;

    &::after {
        content: " ";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: inherit;
        transform: scale(0.5);
        transform-origin: 0 0;
        pointer-events: none;
        box-sizing: border-box;
    }
}

.solid {
    &::after {
        border: 1Px solid rgba(0, 0, 0, 0.1);
    }

    &-top {
        &::after {
            border-top: 1Px solid rgba(0, 0, 0, 0.1);
        }
    }

    &-right {
        &::after {
            border-right: 1Px solid rgba(0, 0, 0, 0.1);
        }
    }

    &-bottom {
        &::after {
            border-bottom: 1Px solid rgba(0, 0, 0, 0.1);
        }
    }

    &-left {
        &::after {
            border-left: 1Px solid rgba(0, 0, 0, 0.1);
        }
    }

    &s {
        &::after {
            border: 4Px solid #eee;
        }

        &-top {
            &::after {
                border-top: 4Px solid #eee;
            }
        }

        &-right {
            &::after {
                border-right: 4Px solid #eee;
            }
        }

        &-bottom {
            &::after {
                border-bottom: 4Px solid #eee;
            }
        }

        &-left {
            &::after {
                border-left: 4Px solid #eee;
            }
        }
    }
}

/* -- 虚线 -- */

.dashed {
    &::after {
        border: 1Px dashed #ddd;
    }

    &-top {
        &::after {
            border-top: 1Px dashed #ddd;
        }
    }

    &-right {
        &::after {
            border-right: 1Px dashed #ddd;
        }
    }

    &-bottom {
        &::after {
            border-bottom: 1Px dashed #ddd;
        }
    }

    &-left {
        &::after {
            border-left: 1Px dashed #ddd;
        }
    }

    &s {
        &::after {
            border: 4Px dashed #eee;
        }

        &-top {
            &::after {
                border-top: 4Px dashed #eee;
            }
        }

        &-right {
            &::after {
                border-right: 4Px dashed #eee;
            }
        }

        &-bottom {
            &::after {
                border-bottom: 4Px dashed #eee;
            }
        }

        &-left {
            &::after {
                border-left: 4Px dashed #eee;
            }
        }
    }

}


/**
*********************************************
* 字体处理
*********************************************
*/


.text {
    &-Abc {
        text-transform: Capitalize;
    }

    &-ABC {
        text-transform: Uppercase;
    }

    &-abc {
        text-transform: Lowercase;
    }

    &-price {
        &::before {
            content: "¥";
            font-size: 80%;
            margin-right: 2Px;
        }
    }

    &-cut {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    &-cut-1 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 1;
    }

    &-cut-2 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 2;
    }

    &-cut-3 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 3;
    }

    &-bold {
        font-weight: bold;
    }

    &-center {
        text-align: center;
    }

    &-content {
        line-height: 1.6;
    }

    &-left {
        text-align: left;
    }

    &-right {
        text-align: right;
    }


    &-flex-center {
        justify-content: center;
        align-items: center;
    }

}


/**
*********************************************
* 颜色 背景色处理
*********************************************
*/
.bg {

    &-empty,
    &-transition {
        background-color: transparent
    }

    &-red {
        background-color: $red;
        color: $white;

        &.light {
            color: $red;
            background-color: $redLight;
        }
    }

    &-orange {
        background-color: $orange;
        color: $white;

        &.light {
            color: $orange;
            background-color: $orangeLight;
        }
    }

    &-yellow {
        background-color: $yellow;
        color: $black;

        &.light {
            color: $yellow;
            background-color: $yellowLight;
        }
    }

    &-olive {
        background-color: $olive;
        color: $white;

        &.light {
            color: $olive;
            background-color: $oliveLight;
        }
    }

    &-green {
        background-color: $green;
        color: $white;

        &.light {
            color: $green;
            background-color: $greenLight;
        }
    }

    &-cyan {
        background-color: $cyan;
        color: $white;

        &.light {
            color: $cyan;
            background-color: $cyanLight;
        }
    }

    &-blue {
        background-color: $blue;
        color: $white;

        &.light {
            color: $blue;
            background-color: $blueLight;
        }
    }

    &-purple {
        background-color: $purple;
        color: $white;

        &.light {
            color: $purple;
            background-color: $purpleLight;
        }
    }

    &-mauve {
        background-color: $mauve;
        color: $white;

        &.light {
            color: $mauve;
            background-color: $mauveLight;
        }
    }

    &-pink {
        background-color: $pink;
        color: $white;

        &.light {
            color: $pink;
            background-color: $pinkLight;
        }
    }

    &-brown {
        background-color: $brown;
        color: $white;

        &.light {
            color: $brown;
            background-color: $brownLight;
        }
    }

    &-grey {
        background-color: $grey;
        color: $white;

        &.light {
            color: $grey;
            background-color: $greyLight;
        }
    }

    &-gray {
        background-color: #f0f0f0;
        color: $black;

        &.light {
            color: #666;
            background-color: #fadbd9;
        }

        &.light {
            color: #888;
            background-color: #f1f1f1;
        }
    }

    &-black {
        background-color: $black;
        color: $white;
    }

    &-white {
        background-color: $white;
        color: $darkGray;
    }

    &-shadeTop {
        background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
        color: $white;
    }

    &-shadeBottom {
        background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
        color: $white;
    }

    &-gradual {
        &-red {
            background-image: $gradualRed;
            color: $white;
        }

        &-orange {
            background-image: $gradualOrange;
            color: $white;
        }

        &-green {
            background-image: $gradualGreen;
            color: $white;
        }

        &-purple {
            background-image: $gradualPurple;
            color: $white;
        }

        &-pink {
            background-image: $gradualPink;
            color: $white;
        }

        &-blue {
            background-image: $gradualBlue;
            color: $white;
        }
    }

    &-img {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    &-mask {
        background-color: $black;
        position: relative;

        &::after {
            content: "";
            border-radius: inherit;
            width: 100%;
            height: 100%;
            display: block;
            background-color: rgba(0, 0, 0, 0.4);
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }

        view,
        div,
        cover-view {
            z-index: 5;
            position: relative;
        }
    }

    &-video {
        position: relative;

        video {
            display: block;
            height: 100%;
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            position: absolute;
            top: 0;
            z-index: 0;
            pointer-events: none;
        }
    }
}

.line {

    &-red::after,
    &s-red::after {
        border-color: $red;
    }

    &-orange::after,
    &s-orange::after {
        border-color: $orange;
    }

    &-yellow::after,
    &s-yellow::after {
        border-color: $yellow;
    }

    &-olive::after,
    &s-olive::after {
        border-color: $olive;
    }

    &-green::after,
    &s-green::after {
        border-color: $green;
    }

    &-cyan::after,
    &s-cyan::after {
        border-color: $cyan;
    }

    &-blue::after,
    &s-blue::after {
        border-color: $blue;
    }

    &-purple::after,
    &s-purple::after {
        border-color: $purple;
    }

    &-mauve::after,
    &s-mauve::after {
        border-color: $mauve;
    }

    &-pink::after,
    &s-pink::after {
        border-color: $pink;
    }

    &-brown::after,
    &s-brown::after {
        border-color: $brown;
    }

    &-grey::after,
    &s-grey::after {
        border-color: $grey;
    }

    &-gray::after,
    &s-gray::after {
        border-color: $gray;
    }

    &-black::after,
    &s-black::after {
        border-color: $black;
    }

    &-white::after,
    &s-white::after {
        border-color: $white;
    }
}

.line-red,
.lines-red,
.text-red {
    color: $red;
}

.line-orange,
.lines-orange,
.text-orange {
    color: $orange;
}

.line-yellow,
.lines-yellow,
.text-yellow {
    color: $yellow;
}

.line-olive,
.lines-olive,
.text-olive {
    color: $olive;
}

.line-green,
.lines-green,
.text-green {
    color: $green;
}

.line-cyan,
.lines-cyan,
.text-cyan {
    color: $cyan;
}

.line-blue,
.lines-blue,
.text-blue {
    color: $blue;
}

.line-purple,
.lines-purple,
.text-purple {
    color: $purple;
}

.line-mauve,
.lines-mauve,
.text-mauve {
    color: $mauve;
}

.line-pink,
.lines-pink,
.text-pink {
    color: $pink;
}

.line-brown,
.lines-brown,
.text-brown {
    color: $brown;
}

.line-grey,
.lines-grey,
.text-grey {
    color: $grey;
}

.line-gray,
.lines-gray,
.text-gray {
    color: $gray;
}

.line-black,
.lines-black,
.text-black {
    color: $black;
}

.line-white,
.lines-white,
.text-white {
    color: $white;
}



/**
*********************************************
* 阴影处理
*********************************************
*/

.shadow {

    // box-shadow: 0 1px 6px rgba(26, 26, 26, 0.1);
    box-shadow: 3Px 4Px 6Px rgba(26, 26, 26, 0.1);

    &-lg {
        box-shadow: 0Px 20Px 50Px 0Px rgba(0, 0, 0, 0.07);
    }

    &-warp {
        position: relative;
        box-shadow: 0 0 5Px rgba(0, 0, 0, 0.1);

        &:before,
        &:after {
            position: absolute;
            content: "";
            top: 10Px;
            bottom: 15Px;
            left: 10Px;
            width: 50%;
            box-shadow: 0 15Px 10Px rgba(0, 0, 0, 0.2);
            transform: rotate(-3deg);
            z-index: -1;

        }

        &:after {
            right: 10Px;
            left: auto;
            transform: rotate(3deg);
        }
    }

    &-blur {
        position: relative;

        &::before {
            content: "";
            display: block;
            background: inherit;
            filter: blur(5Px);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 5Px;
            left: 5Px;
            z-index: -1;
            opacity: 0.4;
            transform-origin: 0 0;
            border-radius: inherit;
            transform: scale(1, 1);
        }
    }
}

.shadow {
    &[class*="-red"] {
        box-shadow: $ShadowSize $redShadow;
    }

    &[class*="-orange"] {
        box-shadow: $ShadowSize $orangeShadow;
    }

    &[class*="-yellow"] {
        box-shadow: $ShadowSize $yellowShadow;
    }

    &[class*="-olive"] {
        box-shadow: $ShadowSize $oliveShadow;
    }

    &[class*="-green"] {
        box-shadow: $ShadowSize $greenShadow;
    }

    &[class*="-cyan"] {
        box-shadow: $ShadowSize $cyanShadow;
    }

    &[class*="-blue"] {
        box-shadow: $ShadowSize $blueShadow;
    }

    &[class*="-purple"] {
        box-shadow: $ShadowSize $purpleShadow;
    }

    &[class*="-mauve"] {
        box-shadow: $ShadowSize $mauveShadow;
    }

    &[class*="-pink"] {
        box-shadow: $ShadowSize $pinkShadow;
    }

    &[class*="-white"] {
        box-shadow: $ShadowSize $blackShadow;
    }
}

.text-shadow {
    text-shadow: 1Px 2Px 3Px rgba(0, 0, 0, 0.4);
}

/**
*********************************************
* 相关函数定义
*********************************************
*/

@mixin radius-top($value: 4Px) {
    border-top-left-radius: $value;
    border-top-right-radius: $value;
}

@mixin radius-right($value: 4Px) {
    border-top-right-radius: $value;
    border-bottom-right-radius: $value;
}

@mixin radius-bottom ($value:4Px) {
    border-bottom-right-radius: $value;
    border-bottom-left-radius: $value;
}

@mixin radius-left($value:4Px) {
    border-top-left-radius: $value;
    border-bottom-left-radius: $value;
}

/**
*********************************************
* size style
*********************************************
*/
.margin {
    margin: 15Px;

    &-md {
        margin: 15Px;
    }

    &-x {
        margin-left: 15Px;
        margin-right: 15Px;
    }

    &-y {
        margin-top: 15Px;
        margin-bottom: 15Px;
    }


    &-0 {
        margin: 0;
    }

    &-xs {
        margin: 5Px;
    }

    &-sm {
        margin: 10Px;
    }

    &-lg {
        margin: 20Px;
    }

    &-xl {
        margin: 25Px;
    }

    &-xxl {
        margin: 30Px;
    }

    &-sl {
        margin: 35Px;
    }

    &-xsl {
        margin: 40Px;
    }

    &-top {
        margin-top: 15Px;

        &-md {
            margin-top: 15Px;
        }

        &-xs {
            margin-top: 5Px;
        }

        &-sm {
            margin-top: 10Px;
        }

        &-lg {
            margin-top: 20Px;
        }

        &-xl {
            margin-top: 25Px;
        }
    }

    &-right {
        margin-right: 15Px;

        &-md {
            margin-right: 15Px;
        }

        &-xs {
            margin-right: 5Px;
        }

        &-sm {
            margin-right: 10Px;
        }

        &-lg {
            margin-right: 20Px;
        }

        &-xl {
            margin-right: 25Px;
        }
    }

    &-bottom {
        margin-bottom: 15Px;

        &-md {
            margin-bottom: 15Px;
        }

        &-xs {
            margin-bottom: 5Px;
        }

        &-sm {
            margin-bottom: 10Px;
        }

        &-lg {
            margin-bottom: 20Px;
        }

        &-xl {
            margin-bottom: 25Px;
        }
    }

    &-left {
        margin-left: 15Px;

        &-md {
            margin-left: 15Px;
        }

        &-xs {
            margin-left: 5Px;
        }

        &-sm {
            margin-left: 10Px;
        }

        &-lg {
            margin-left: 20Px;
        }

        &-xl {
            margin-left: 25Px;
        }
    }

    &-lr,
    &-x {
        margin-right: 15Px;
        margin-left: 15Px;

        &-md {
            margin-right: 15Px;
            margin-left: 15Px;
        }

        &-xs {
            margin-right: 5Px;
            margin-left: 5Px;
        }

        &-sm {
            margin-right: 10Px;
            margin-left: 10Px;
        }

        &-lg {
            margin-right: 20Px;
            margin-left: 20Px;
        }

        &-xl {
            margin-right: 25Px;
            margin-left: 25Px;
        }
    }

    &-tb,
    &-y {
        margin-top: 15Px;
        margin-bottom: 15Px;

        &-md {
            margin-top: 15Px;
            margin-bottom: 15Px;
        }

        &-xs {
            margin-top: 5Px;
            margin-bottom: 5Px;
        }

        &-sm {
            margin-top: 10Px;
            margin-bottom: 10Px;
        }

        &-lg {
            margin-top: 20Px;
            margin-bottom: 20Px;
        }

        &-xl {
            margin-top: 25Px;
            margin-bottom: 25Px;
        }
    }
}

.padding {
    padding: 15Px;

    &-md {
        padding: 15Px;
    }

    &-x {
        padding-left: 15Px;
        padding-right: 15Px;
    }

    &-y {
        padding-top: 15Px;
        padding-bottom: 15Px;
    }

    &-0 {
        padding: 0;
    }

    &-xs {
        padding: 5Px;
    }

    &-sm {
        padding: 10Px;
    }

    &-lg {
        padding: 20Px;
    }

    &-xl {
        padding: 25Px;
    }

    &-top {
        padding-top: 15Px;

        &-md {
            padding-top: 15Px;
        }

        &-xs {
            padding-top: 5Px;
        }

        &-sm {
            padding-top: 10Px;
        }

        &-lg {
            padding-top: 20Px;
        }

        &-xl {
            padding-top: 25Px;
        }
    }

    &-right {
        padding-right: 15Px;

        &-md {
            padding-right: 15Px;
        }

        &-xs {
            padding-right: 5Px;
        }

        &-sm {
            padding-right: 10Px;
        }

        &-lg {
            padding-right: 20Px;
        }

        &-xl {
            padding-right: 25Px;
        }
    }

    &-bottom {
        padding-bottom: 15Px;

        &-md {
            padding-bottom: 15Px;
        }

        &-xs {
            padding-bottom: 5Px;
        }

        &-sm {
            padding-bottom: 10Px;
        }

        &-lg {
            padding-bottom: 20Px;
        }

        &-xl {
            padding-bottom: 25Px;
        }
    }

    &-left {
        padding-left: 15Px;

        &-md {
            padding-left: 15Px;
        }

        &-xs {
            padding-left: 5Px;
        }

        &-sm {
            padding-left: 10Px;
        }

        &-lg {
            padding-left: 20Px;
        }

        &-xl {
            padding-left: 25Px;
        }
    }

    &-lr,
    &-x {
        padding-right: 15Px;
        padding-left: 15Px;

        &-md {
            padding-right: 15Px;
            padding-left: 15Px;
        }

        &-xs {
            padding-right: 5Px;
            padding-left: 5Px;
        }

        &-sm {
            padding-right: 10Px;
            padding-left: 10Px;
        }

        &-lg {
            padding-right: 20Px;
            padding-left: 20Px;
        }

        &-xl {
            padding-right: 25Px;
            padding-left: 25Px;
        }
    }

    &-tb,
    &-y {
        padding-top: 15Px;
        padding-bottom: 15Px;

        &-xs {
            padding-top: 5Px;
            padding-bottom: 5Px;
        }

        &-sm {
            padding-top: 10Px;
            padding-bottom: 10Px;
        }

        &-lg {
            padding-top: 20Px;
            padding-bottom: 20Px;
        }

        &-xl {
            padding-top: 25Px;
            padding-bottom: 25Px;
        }
    }

    &-item {
        padding: 10Px 15Px;
    }

}

.image {
    &-xs {
        width: 16Px;
        height: 16Px;
    }

    &-sm {
        width: 20Px;
        height: 20Px;
    }

    &-md {
        width: 24Px;
        height: 24Px;
    }

    &-lg {
        width: 32Px;
        height: 32Px;
    }

    &-xl {
        width: 48Px;
        height: 48Px;
    }

    &-xxl {
        width: 64Px;
        height: 64Px;
    }

    &-sl {
        width: 80Px;
        height: 80Px;
    }

    &-xsl {
        width: 100Px;
        height: 100Px;
    }
}

.text {
    &-xs {
        font-size: 10Px;
    }

    &-sm {
        font-size: 12Px;
    }

    &-df {
        font-size: 14Px;
    }

    &-md {
        font-size: 14Px;
    }

    &-lg {
        font-size: 16Px;
    }

    &-xl {
        font-size: 18Px;
    }

    &-xxl {
        font-size: 22Px;
    }

    &-sl {
        font-size: 40Px;
    }

    &-xsl {
        font-size: 60Px;
    }
}

/**
*********************************************
* radius 员角处理
*********************************************
*/


.miao-radius,
.m-r,
.radius {

    border-radius: 4Px;

    // 左上 a
    // 右上 b
    // 右下 c
    // 左下 d


    &-a {
        border-top-left-radius: 4Px;

        &-xs {
            border-top-left-radius: 2Px;
        }

        &-sm {
            border-top-left-radius: 3Px;
        }

        &-md {
            border-top-left-radius: 4Px;
        }

        &-lg {
            border-top-left-radius: 6Px;
        }

        &-xl {
            border-top-left-radius: 8Px;
        }

        &-xxl {
            border-top-left-radius: 10Px;
        }

        &-sl {
            border-top-left-radius: 14Px;
        }

        &-xsl {
            border-top-left-radius: 20Px;
        }
    }

    &-b {
        border-top-right-radius: 4Px;

        &-xs {
            border-top-right-radius: 2Px;
        }

        &-sm {
            border-top-right-radius: 3Px;
        }

        &-md {
            border-top-right-radius: 4Px;
        }

        &-lg {
            border-top-right-radius: 6Px;
        }

        &-xl {
            border-top-right-radius: 8Px;
        }

        &-xxl {
            border-top-right-radius: 10Px;
        }

        &-sl {
            border-top-right-radius: 14Px;
        }

        &-xsl {
            border-top-right-radius: 20Px;
        }
    }

    &-c {
        border-bottom-right-radius: 4Px;

        &-xs {
            border-bottom-right-radius: 2Px;
        }

        &-sm {
            border-bottom-right-radius: 3Px;
        }

        &-md {
            border-bottom-right-radius: 4Px;
        }

        &-lg {
            border-bottom-right-radius: 6Px;
        }

        &-xl {
            border-bottom-right-radius: 8Px;
        }

        &-xxl {
            border-bottom-right-radius: 10Px;
        }

        &-sl {
            border-bottom-right-radius: 14Px;
        }

        &-xsl {
            border-bottom-right-radius: 20Px;
        }
    }

    &-d {
        border-bottom-left-radius: 4Px;

        &-xs {
            border-bottom-left-radius: 2Px;
        }

        &-sm {
            border-bottom-left-radius: 3Px;
        }

        &-md {
            border-bottom-left-radius: 4Px;
        }

        &-lg {
            border-bottom-left-radius: 6Px;
        }

        &-xl {
            border-bottom-left-radius: 8Px;
        }

        &-xxl {
            border-bottom-left-radius: 10Px;
        }

        &-sl {
            border-bottom-left-radius: 14Px;
        }

        &-xsl {
            border-bottom-left-radius: 20Px;
        }
    }



    &-top {
        border-top-left-radius: 4Px;
        border-top-right-radius: 4Px;

        &-xs {
            @include radius-top(2Px)
        }

        &-sm {
            @include radius-top(3Px)
        }

        &-md {
            @include radius-top()
        }

        &-lg {
            @include radius-top(6Px)
        }

        &-xl {
            @include radius-top(8Px)
        }

        &-xxl {
            @include radius-top(10Px)
        }

        &-sl {
            @include radius-top(14Px)
        }

        &-xsl {
            @include radius-top(20Px)
        }

    }

    &-right {
        border-top-right-radius: 4Px;
        border-bottom-right-radius: 4Px;

        &-xs {
            @include radius-right(2Px)
        }

        &-sm {
            @include radius-right(3Px)
        }

        &-md {
            @include radius-right()
        }

        &-lg {
            @include radius-right(6Px)
        }

        &-xl {
            @include radius-right(8Px)
        }

        &-xxl {
            @include radius-right(10Px)
        }

        &-sl {
            @include radius-right(14Px)
        }

        &-xsl {
            @include radius-right(20Px)
        }
    }

    &-left {
        border-top-left-radius: 4Px;
        border-bottom-left-radius: 4Px;

        &-xs {
            @include radius-left(2Px)
        }

        &-sm {
            @include radius-left(3Px)
        }

        &-md {
            @include radius-left()
        }

        &-lg {
            @include radius-left(6Px)
        }

        &-xl {
            @include radius-left(8Px)
        }

        &-xxl {
            @include radius-left(10Px)
        }

        &-sl {
            @include radius-left(14Px)
        }

        &-xsl {
            @include radius-left(20Px)
        }
    }

    &-bottom {
        border-bottom-right-radius: 4Px;
        border-bottom-left-radius: 4Px;

        &-xs {
            @include radius-bottom(2Px)
        }

        &-sm {
            @include radius-bottom(3Px)
        }

        &-md {
            @include radius-bottom()
        }

        &-lg {
            @include radius-bottom(6Px)
        }

        &-xl {
            @include radius-bottom(8Px)
        }

        &-xxl {
            @include radius-bottom(10Px)
        }

        &-sl {
            @include radius-bottom(14Px)
        }

        &-xsl {
            @include radius-bottom(20Px)
        }
    }
}


/**
*********************************************
* 模态框处理
*********************************************
*/


.miao-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1110;
}


.miao-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1110;
    opacity: 0;
    outline: 0;
    text-align: center;
    -ms-transform: scale(1.185);
    transform: scale(1.185);
    backface-visibility: hidden;
    perspective: 2000px;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease-in-out 0s;
    pointer-events: none;

    &::before {
        content: "\200B";
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

    &.show {
        opacity: 1;
        transition-duration: 0.3s;
        -ms-transform: scale(1);
        transform: scale(1);
        overflow-x: hidden;
        overflow-y: auto;
        pointer-events: auto;
    }

    &.bottom-modal {
        margin-bottom: -1000px;

        &::before {
            vertical-align: bottom;
        }

        .miao-dialog {
            width: 100%;
            border-radius: 0;
        }

        &.show {
            margin-bottom: 0;
        }
    }

    &.drawer-modal {
        transform: scale(1);
        display: flex;

        .cu-dialog {
            height: 100%;
            min-width: 200px;
            border-radius: 0;
            margin: initial;
            transition-duration: 0.3s;
        }

        &.justify-start {
            .cu-dialog {
                transform: translateX(-100%);
            }
        }

        &.justify-end {
            .cu-dialog {
                transform: translateX(100%);
            }
        }

        &.show {
            .cu-dialog {
                transform: translateX(0%);
            }
        }
    }
}

.miao-dialog {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    width: 680px;
    max-width: 100%;
    background-color: #f8f8f8;
    border-radius: 5Px;
    overflow: hidden;
}



/**
*********************************************
* Grid 布局处理
*********************************************
*/

.miao-grid-warp,
.grid {
    display: grid;
    // 列数:2-99 最多 99 列
    place-content: center;
    overflow: hidden;

    @for $i from 1 to 100 {
        @if $i>1 {
            &.column-#{$i} {
                grid-template-columns: repeat($i, 1fr);
                grid-template-rows: repeat($i, 1fr);
            }
        }

        // 全局间距 最高  100 px
        &.gap-#{$i} {
            grid-gap: #{$i * 2}px;
        }

        // 横向间距
        &.row-gap-#{$i} {
            grid-row-gap: #{$i * 2}px;
        }

        // 垂直间距
        &.column#{$i} {
            grid-column-gap: #{$i * 2}px;
        }
    }

    &.scroll-x {
        overflow-x: scroll;
        //overflow: hidden;
    }

    &.scroll-y {
        overflow-y: scroll;
        //  overflow: hidden;
    }
}



/**
*********************************************
* flex 布局处理
*********************************************
*/


.flex,
.miao-flex-warp {
    display: flex;


    &-sub {
        flex: 1;
    }


    &-twice {
        flex: 2;
    }


    &-treble {
        flex: 3;
    }


    &-direction {
        flex-direction: column;
    }


    &-direction-column {
        flex-direction: column;
    }


    &-direction-row {
        flex-direction: row;
    }


    &-direction-column-reverse {
        flex-direction: column-reverse;
    }


    &-direction-row-reverse {
        flex-direction: row-reverse;
    }


    &-wrap {
        flex-wrap: wrap;
    }
}


.basis {
    &-sm {
        flex-basis: 40%;
    }


    &-df {
        flex-basis: 50%;
    }


    &-lg {
        flex-basis: 60%;
    }


    &-xl {
        flex-basis: 80%;
    }
}


.align {
    &-start {
        align-items: flex-start;
    }


    &-end {
        align-items: flex-end;
    }


    &-center {
        align-items: center;
    }


    &-stretch {
        align-items: stretch;
    }
}


.self {
    &-start {
        align-self: flex-start;
    }


    &-center {
        align-self: flex-center;
    }


    &-end {
        align-self: flex-end;
    }


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


.justify {
    &-start {
        justify-content: flex-start;
    }


    &-end {
        justify-content: flex-end;
    }


    &-center {
        justify-content: center;
    }


    &-between {
        justify-content: space-between;
    }

    &-around {
        justify-content: space-around;
    }
}


/**
*********************************************
* Grid 布局处理
*********************************************
*/