@charset "utf-8";

/**
 * yo-btn通用或全局扩展
 */

// 通用按钮样式，高亮黄色，disable 态淡黄色
@include yo-btn(
    $name: normal,
    $width: 92%,
    $height: .44rem,
    $bgcolor: #ff9a14,
    $border-width: 0,
    $radius: .03rem,
    $font-size: .18rem,
    $color:#fff
) {
    display: block;
    margin: auto;

    &.disabled {
        background: rgba(255, 154, 20, .3);
        font-size: .18rem;
    }

    &.touch-bgcolor {
        opacity: .7;
        // border-color: #ab4400;
        // background: #ab4400;
    }
}

@include yo-btn(
    $name: defaultCount,
    $bgcolor: #17a5e0,
    $color:#fff,
    $font-size: .12rem,
    $border-width: 0
){
    height: .22rem;
    line-height: .22rem;
    border-radius: .04rem;
}

@include yo-btn(
    $name: disableCount,
    $bgcolor: #dcdcde
);

@include yo-btn(
    $name: square,
    $width: auto,
    $height: .48rem,
    $bgcolor: #f8d9ab,
    $border-width: 0,
    $radius: 0,
    $color:#fff
) {
    display: block;
    margin: auto;
    color:#fff;
    &.active {
        background: #ff9a14;
        font-size: .18rem;
    }

    &.touch-bgcolor {
        background: rgba(255, 154, 20, .5);
    }
}

@include yo-btn(
    $name: block,
    $width: 100%,
    $height: .47rem,
    $bgcolor: #f8d9ab,
    $border-width: 0,
    $radius: 0.04rem,
    $color:#fff
) {
    display: block;
    margin: auto;

    &.active {
        background: #ff9800;
        font-size: .18rem;
    }

    &.touch-bgcolor {
        background: rgba(255, 154, 20, .5);
    }
}

@include yo-btn(
    $name: result,
    $width: 86%,
    $height: .44rem,
    $color: #fff,
    $font-size: .18rem,
    $bgcolor: #ff9800,
    $border-color: #ff9800,
    $touch-bgcolor: #ed7700,
    $radius: .03rem
){
    margin: .35rem 6% .14rem;
};

@include yo-btn(
    $name: small,
    $height: .44rem,
    $width: 60%,
    $bgcolor: transparent,
    $border-width: .01rem,
    $border-color: #fff,
    $radius: .22rem,
    $color: #fff,
    $font-size: .18rem
) {
    &.touch-bgcolor {
        opacity: .8;
    }
}

@include yo-btn(
    $name: borrow,
    $height: .44rem,
    $width: 60%,
    $bgcolor: #fff,
    $border-width: 0,
    $radius: .22rem,
    $color: #4c68d7,
    $font-size: .18rem
) {
    &.touch-bgcolor {
        opacity: .8;
    }
}

@include yo-btn(
    $name: apply,
    $height: .46rem,
    $width: 80%,
    $bgcolor: #ff9800,
    $border-width: 0,
    $radius: .23rem,
    $color: #fff,
    $font-size: .18rem
) {
    font-weight: bold;
    margin-left: 10%;
    &.touch-bgcolor {
        opacity: .8;
    }
}

@include yo-btn(
    $name: feedback,
    $width: 100%,
    $height: .48rem,
    $padding: 0 .15rem,
    $border-color: #ddd,
    $bgcolor: #fff,
    $font-size: .17rem,
    $color: #212121
) {
    border-radius: .04rem;
}

@include yo-btn(
    $name: coupontouse,
    $height: .24rem,
    $bgcolor: #fff,
    $width: 100%,
    $font-size: .12rem,
    $color: #099FDE,
    $padding: 0 .11rem
) {
    font-family: PingFangSC-Regular;
    text-align: center;
    font-weight: 300;
    &::after {
        border: 1px solid #099FDE;
        border-radius: .48rem;
    }
}

@include yo-btn(
    $name: agree-rh,
    $width: 100%,
    $height: .48rem,
    $font-size: .18rem,
    $bgcolor: #ff9800,
    $border-width: 0
) {
    @include border-radius(0);
}

@include yo-btn(
    $name: error,
    $border-width: 1px,
    $border-color: #099fde,
    $bgcolor: #099fde,
    $color: #fff,
    $radius: .04rem,
    $height: .3rem
) {
    &::after {
        overflow: visible;
    }
};


@include yo-btn(
    $name: repayconfirm
) {
    margin: .15rem
}