@import "var";

@for $i from 0 through 50 {
    .m-#{$i} {
        margin: #{$i}px;
    }
    .m-t-#{$i} {
        margin-top: #{$i}px;
    }
    .m-b-#{$i} {
        margin-bottom: #{$i}px;
    }
    .m-r-#{$i} {
        margin-right: #{$i}px;
    }
    .m-l-#{$i} {
        margin-left: #{$i}px;
    }
    .m-lr-#{$i} {
        margin-left: #{$i}px;
        margin-right: #{$i}px;
    }
    .m-tb-#{$i} {
        margin-top: #{$i}px;
        margin-bottom: #{$i}px;
    }

    m-n#{$i} {
        margin: -#{$i}px;
    }
    m-t-n#{$i} {
        margin-top: -#{$i}px;
    }
    m-b-n#{$i} {
        margin-top: -#{$i}px;
    }

    .p-#{$i} {
        padding: #{$i}px;
    }
    .p-t-#{$i} {
        padding-top: #{$i}px;
    }
    .p-b-#{$i} {
        padding-bottom: #{$i}px;
    }
    .p-r-#{$i} {
        padding-right: #{$i}px;
    }
    .p-l-#{$i} {
        padding-left: #{$i}px;
    }
    .p-lr-#{$i} {
        padding-left: #{$i}px;
        padding-right: #{$i}px;
    }
    .p-tb-#{$i} {
        padding-top: #{$i}px;
        padding-bottom: #{$i}px;
    }

    .p-n#{$i} {
        padding: -#{$i}px;
    }
    .p-t-n#{$i} {
        padding-top: -#{$i}px;
    }
}

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

}
.overflow-auto {
    overflow: auto;
}
.inline-block {
    display: inline-block;
}
.hidden {
    display: none;
}

.mix-button-group {
    display: flex;
    width: 100%;
    .van-button {
        border-radius: 0;
    }
}

.mix-pull-bottom {
    position: absolute;
    bottom: 0;
}
.mix-fixed {
    position: fixed;
}


.mix-bingo-color {
    color: $orange;
}
.mix-warning-color {
    color: $warning-color;
}
.mix-bingo-bg-color {
    background-color: $orange;
}
.mix-warning-bg-color {
    background-color: $warning-color;
}
.mix-info-bg-color {
    background-color: $info-color;
}
.mix-success-bg-color {
    background-color: $green;
}

.all-data {
    text-align: center;
    color: $gray-6;
    font-size: 0.75rem;
    padding-top: 5px;
    padding-bottom: 2px;
}

.mix-panel {
    .van-collapse-item__title {
        background-color: $gray-3;
    }
    .van-collapse-item__content {
        padding: 0;
    }
    .panel-title--text {
        font-weight: 700;
    }
}

.mix-text-btn.van-button--default {
    border: none;
    color: $blue;
    background: transparent;
    padding: 0 5px;
}
mix-text-btn.van-button:before {
    background: transparent;
}

.helper {
    font-size: .8rem;
    color: $gray-6;
}