@import "../var.scss";

/*h5 兼容 switch*/
.weui-switch,
.weui-switch-cp__box {
    flex: 0 1 auto !important;
}

button {
    border: 0;
}

input.weui-check {
    position: relative;
    left: 0;
}

.h5-radio,
.h5-switch,
.h5-checkbox {
    position: relative;
    box-sizing: content-box;
}

.h5-checkbox-input {
    display: inline-block;
    min-height: 0;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    font-size: 23Px;
    border: 1Px solid #F1F1F1;
    background-color: #E1E1E1;
    color: $white;
    border-radius: 3Px;
    width: 23Px;
    height: 23Px;
    position: relative;
    vertical-align: 0;
    margin-left: 5Px;
    margin-right: 5Px;

    &::before {
        font-family: "EIcon";
        content: "\e645";
        position: absolute;
        color: $white !important;
        top: 50%;
        margin-top: -16px;
        right: 6px;
        font-size: 32px;
        line-height: 32px;
        pointer-events: none;
        transform: scale(1, 1);
        transition: all 0.3s ease-in-out 0s;
        z-index: 9;
    }

    &.more::before {
        font-family: "EIcon";
        content: "\e768";
        position: absolute;
        color: $white !important;
        top: 50%;
        margin-top: -16px;
        right: 6px;
        font-size: 32px;
        line-height: 32px;
        pointer-events: none;
        transform: scale(1, 1);
        transition: all 0.3s ease-in-out 0s;
        z-index: 9;
    }

    &.disabled {
        &.more::before {
            font-family: "EIcon";
            content: "\e768";
            position: absolute;
            color: $white !important;
            top: 50%;
            margin-top: -16px;
            right: 6px;
            font-size: 32px;
            line-height: 32px;
            pointer-events: none;
            transform: scale(1, 1);
            transition: all 0.3s ease-in-out 0s;
            z-index: 9;
        }

        &::before {
            font-family: "EIcon";
            content: "\e645";
            position: absolute;
            color: $white !important;
            top: 50%;
            margin-top: -16px;
            right: 6px;
            font-size: 32px;
            line-height: 32px;
            pointer-events: none;
            transform: scale(1, 1);
            transition: all 0.3s ease-in-out 0s;
            z-index: 9;
        }
    }

    &.round {
        border-radius: 200px;
    }
}

.h5-radio {
    -webkit-tap-highlight-color: transparent;
    display: inline-block;

    &-group {
        display: block;
    }

    &.radio::before {
        display: none;
    }

    &.radio.checked {
        .h5-radio-input::after {
            content: "";
            background-color: transparent;
            display: block;
            position: absolute;
            width: 14px;
            height: 14px;
            z-index: 999;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 200px;
            border: 16px solid $white !important;
        }
    }

    &[hidden],
    &-group[hidden] {
        display: none;
    }


    &-wrapper {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }

    &-input {
        appearance: none;
        margin-right: 5px;
        outline: 0;
        border: 2px solid #d1d1d1;
        background-color: #fff;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        position: relative;
        box-sizing: content-box;
        overflow: hidden;

        &:before {
            font-family: "EIcon";
            content: "\e645";
            position: absolute;
            color: $white !important;
            top: 50%;
            margin-top: -16px;
            right: 6px;
            font-size: 32px;
            line-height: 32px;
            pointer-events: none;
            transform: scale(1, 1);
            transition: all 0.3s ease-in-out 0s;
            z-index: 9;
        }

        &.h5-radio-input-disabled {
            background-color: #e1e1e1;
            border-color: #d1d1d1;
        }

        &.h5-radio-input-disabled:before {
            color: #adadad;
        }
    }


}

.h5-switch {
    display: inline-block;

    &::before,
    &::after {
        font-family: "EIcon";
        content: "\e645";
        position: absolute;
        color: #fff !important;
        top: 0;
        left: 0;
        font-size: 13Px;
        line-height: 13Px;
        width: 50%;
        text-align: center;
        pointer-events: none;
        transform: scale(0, 0);
        transition: all 0.3s ease-in-out 0s;
        z-index: 9;
        bottom: 0;
        height: 13Px;
        margin: auto;
    }

    &::before {
        content: "\e646";
        right: 0;
        transform: scale(1, 1);
        left: auto;
    }

    .h5-switch-input {
        border: none;
        padding: 0 13Px;
        //width: 48Px;
        height: 26Px;
        margin: 0;
        border-radius: 50Px;
        position: relative;

        &.radius,
        &.radius::after {
            border-radius: 3Px;
        }

        &::after {
            content: "";
            margin: auto;
            width: 26Px;
            height: 26Px;
            border-radius: 50Px;
            left: 0;
            top: 0;
            bottom: 0;
            position: absolute;
            box-shadow: 0 0 5Px $gray;
            transform: scale(0.9, 0.9);
            transition: all 0.2s ease-in-out 0s;
            background-color: $white;
        }

        &:not([class*="bg-"]) {
            background: $gray !important;
        }
    }

    &.checked {
        .h5-switch-input::after {
            margin: auto;
            left: calc(100% - 27Px);
            box-shadow: none;
            transform: scale(0.9, 0.9);
        }

        &::after {
            transform: scale(1, 1);
        }

        &::before {
            transform: scale(0, 0);
        }
    }
}

.h5-switch.red.checked .h5-switch-input,
.h5-checkbox.red .checked.h5-checkbox-input,
.h5-radio.red.checked .h5-radio-input {
    border-color: $red !important;
}

.h5-switch.red.disabled .h5-switch-input.disabled,
.h5-checkbox.red .disabled.checked.h5-checkbox-input,
.h5-radio.red.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.orange.checked .h5-switch-input,
.h5-checkbox.orange .checked.h5-checkbox-input,
.h5-radio.orange.checked .h5-radio-input {
    border-color: $orange !important;
}

.h5-switch.orange.disabled .h5-switch-input,
.h5-checkbox.orange .disabled.checked.h5-checkbox-input,
.h5-radio.orange.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.yellow.checked .h5-switch-input,
.h5-checkbox.yellow .checked.h5-checkbox-input,
.h5-radio.yellow.checked .h5-radio-input {
    border-color: $yellow !important;
}

.h5-switch.yellow.disabled .h5-switch-input,
.h5-checkbox.yellow .disabled.checked.h5-checkbox-input,
.h5-radio.yellow.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.olive.checked .h5-switch-input,
.h5-checkbox.olive .checked.h5-checkbox-input,
.h5-radio.olive.checked .h5-radio-input {
    border-color: $olive !important;
}

.h5-switch.olive.disabled .h5-switch-input,
.h5-checkbox.olive .disabled.checked.h5-checkbox-input,
.h5-radio.olive.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.green.checked .h5-switch-input,
.h5-checkbox.green .checked.h5-checkbox-input,
.h5-checkbox .checked.h5-checkbox-input,
.h5-radio.green.checked .h5-radio-wrapper .h5-radio-input {
    border-color: $green !important;
}

.h5-switch.green.disabled .h5-switch-input,
.h5-checkbox.green .disabled.checked.h5-checkbox-input,
.h5-checkbox .disabled.checked.h5-checkbox-input,
.h5-radio.green.checked.disabled .h5-radio-wrapper .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.cyan.checked .h5-switch-input,
.h5-checkbox.cyan .checked.h5-checkbox-input,
.h5-radio.cyan.checked .h5-radio-input {
    border-color: $cyan !important;
}

.h5-switch.cyan.disabled .h5-switch-input,
.h5-checkbox.cyan .disabled.checked.h5-checkbox-input,
.h5-radio.cyan.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.blue.checked .h5-switch-input,
.h5-checkbox.blue .checked.h5-checkbox-input,
.h5-radio.blue.checked .h5-radio-input {
    border-color: $blue !important;
}

.h5-switch.blue.disabled .h5-switch-input,
.h5-checkbox.blue .disabled.checked.h5-checkbox-input,
.h5-radio.blue.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.purple.checked .h5-switch-input,
.h5-checkbox.purple .checked.h5-checkbox-input,
.h5-radio.purple.checked .h5-radio-input {
    border-color: $purple !important;
}

.h5-switch.purple.disabled .h5-switch-input,
.h5-checkbox.purple .disabled.checked.h5-checkbox-input,
.h5-radio.purple.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.mauve.checked .h5-switch-input,
.h5-checkbox.mauve .checked.h5-checkbox-input,
.h5-radio.mauve.checked .h5-radio-input {
    border-color: $mauve !important;
}

.h5-switch.mauve.disabled .h5-switch-input,
.h5-checkbox.mauve .disabled.checked.h5-checkbox-input,
.h5-radio.mauve.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.pink.checked .h5-switch-input,
.h5-checkbox.pink .checked.h5-checkbox-input,
.h5-radio.pink.checked .h5-radio-input {
    border-color: $pink !important;
}

.h5-switch.pink.disabled .h5-switch-input,
.h5-checkbox.pink .disabled.checked.h5-checkbox-input,
.h5-radio.pink.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.brown.checked .h5-switch-input,
.h5-checkbox.brown .checked.h5-checkbox-input,
.h5-radio.brown.checked .h5-radio-input {
    border-color: $brown !important;
}

.h5-switch.brown.disabled .h5-switch-input,
.h5-checkbox.brown .disabled.checked.h5-checkbox-input,
.h5-radio.brown.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.grey.checked .h5-switch-input,
.h5-checkbox.grey .checked.h5-checkbox-input,
.h5-radio.grey.checked .h5-radio-input {
    border-color: $grey !important;
}

.h5-switch.grey.disabled .h5-switch-input,
.h5-checkbox.grey .disabled.checked.h5-checkbox-input,
.h5-radio.grey.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.gray.checked .h5-switch-input,
.h5-checkbox.gray .checked.h5-checkbox-input,
.h5-radio.gray.checked .h5-radio-input {
    border-color: $gray !important;
}

.h5-switch.gray.disabled .h5-switch-input,
.h5-checkbox.gray .disabled.checked.h5-checkbox-input,
.h5-radio.gray.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.black.checked .h5-switch-input,
.h5-checkbox.black .checked.h5-checkbox-input,
.h5-radio.black.checked .h5-radio-input {
    border-color: $black !important;
}

.h5-switch.black.disabled .h5-switch-input,
.h5-checkbox.black .disabled.checked.h5-checkbox-input,
.h5-radio.black.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.white.checked .h5-switch-input,
.h5-checkbox.white .checked.h5-checkbox-input,
.h5-radio.white.checked .h5-radio-input {
    border-color: $white !important;
}

.h5-switch.white.disabled .h5-switch-input,
.h5-checkbox.white .disabled.checked.h5-checkbox-input,
.h5-radio.white.checked.disabled .h5-radio-input {
    border-color: rgb(209, 209, 209) !important;
}

.h5-switch.red.checked .h5-switch-input,
.h5-checkbox.red .checked.h5-checkbox-input,
.h5-radio.red.checked .h5-radio-input {
    background-color: $red !important;
    color: $white !important;
}

.h5-switch.red.disabled .h5-switch-input,
.h5-checkbox.red .disabled.checked.h5-checkbox-input,
.h5-radio.red.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $white !important;
}

.h5-switch.orange.checked .h5-switch-input,
.h5-checkbox.orange .checked.h5-checkbox-input,
.h5-radio.orange.checked .h5-radio-input {
    background-color: $orange !important;
    color: $white !important;
}

.h5-switch.orange.disabled .h5-switch-input,
.h5-checkbox.orange .disabled.checked.h5-checkbox-input,
.h5-radio.orange.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $white !important;
}

.h5-switch.yellow.checked .h5-switch-input,
.h5-checkbox.yellow .checked.h5-checkbox-input,
.h5-radio.yellow.checked .h5-radio-input {
    background-color: $yellow !important;
    color: $black !important;
}

.h5-switch.yellow.disabled .h5-switch-input,
.h5-checkbox.yellow .disabled.checked.h5-checkbox-input,
.h5-radio.yellow.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $black !important;
}

.h5-switch.olive.checked .h5-switch-input,
.h5-checkbox.olive .checked.h5-checkbox-input,
.h5-radio.olive.checked .h5-radio-input {
    background-color: $olive !important;
    color: $white !important;
}

.h5-switch.olive.disabled .h5-switch-input,
.h5-checkbox.olive .disabled.checked.h5-checkbox-input,
.h5-radio.olive.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $white !important;
}

.h5-switch.green.checked .h5-switch-input,
.h5-checkbox.green .checked.h5-checkbox-input,
checkbox .checked.h5-checkbox-input,
.h5-radio.green.checked .h5-radio-input,
radio.checked .h5-radio-input {
    background-color: $green !important;
    color: $white !important;
}

.h5-switch.green.disabled .h5-switch-input,
.h5-checkbox.green .disabled.checked.h5-checkbox-input,
checkbox .disabled.checked.h5-checkbox-input,
.h5-radio.green.checked.disabled .h5-radio-input,
radio.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $white !important;
}

.h5-switch.cyan.checked .h5-switch-input,
.h5-checkbox.cyan .checked.h5-checkbox-input,
.h5-radio.cyan.checked .h5-radio-input {
    background-color: $cyan !important;
    color: $white !important;
}

.h5-switch.cyan.disabled .h5-switch-input,
.h5-checkbox.cyan .disabled.checked.h5-checkbox-input,
.h5-radio.cyan.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $white !important;
}

.h5-switch.blue.checked .h5-switch-input,
.h5-checkbox.blue .checked.h5-checkbox-input,
.h5-radio.blue.checked .h5-radio-input {
    background-color: $blue !important;
    color: $white !important;
}

.h5-switch.blue.disabled .h5-switch-input,
.h5-checkbox.blue .disabled.checked.h5-checkbox-input,
.h5-radio.blue.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $white !important;
}

.h5-switch.purple.checked .h5-switch-input,
.h5-checkbox.purple .checked.h5-checkbox-input,
.h5-radio.purple.checked .h5-radio-input {
    background-color: $purple !important;
    color: $white !important;
}

.h5-switch.purple.disabled .h5-switch-input,
.h5-checkbox.purple .disabled.checked.h5-checkbox-input,
.h5-radio.purple.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $white !important;
}

.h5-switch.mauve.checked .h5-switch-input,
.h5-checkbox.mauve .checked.h5-checkbox-input,
.h5-radio.mauve.checked .h5-radio-input {
    background-color: $mauve !important;
    color: $white !important;
}

.h5-switch.mauve.disabled .h5-switch-input,
.h5-checkbox.mauve .disabled.checked.h5-checkbox-input,
.h5-radio.mauve.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $white !important;
}

.h5-switch.pink.checked .h5-switch-input,
.h5-checkbox.pink .checked.h5-checkbox-input,
.h5-radio.pink.checked .h5-radio-input {
    background-color: $pink !important;
    color: $white !important;
}

.h5-switch.pink.disabled .h5-switch-input,
.h5-checkbox.pink .disabled.checked.h5-checkbox-input,
.h5-radio.pink.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $white !important;
}

.h5-switch.brown.checked .h5-switch-input,
.h5-checkbox.brown .checked.h5-checkbox-input,
.h5-radio.brown.checked .h5-radio-input {
    background-color: $brown !important;
    color: $white !important;
}

.h5-switch.brown.disabled .h5-switch-input,
.h5-checkbox.brown .disabled.checked.h5-checkbox-input,
.h5-radio.brown.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $white !important;
}

.h5-switch.grey.checked .h5-switch-input,
.h5-checkbox.grey .checked.h5-checkbox-input,
.h5-radio.grey.checked .h5-radio-input {
    background-color: $grey !important;
    color: $white !important;
}

.h5-switch.grey.disabled .h5-switch-input,
.h5-checkbox.grey .disabled.checked.h5-checkbox-input,
.h5-radio.grey.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $white !important;
}

.h5-switch.gray.checked .h5-switch-input,
.h5-checkbox.gray .checked.h5-checkbox-input,
.h5-radio.gray.checked .h5-radio-input {
    background-color: #f0f0f0 !important;
    color: $black !important;
}

.h5-switch.gray.disabled .h5-switch-input,
.h5-checkbox.gray .disabled.checked.h5-checkbox-input,
.h5-radio.gray.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $black !important;
}

.h5-switch.black.checked .h5-switch-input,
.h5-checkbox.black .checked.h5-checkbox-input,
.h5-radio.black.checked .h5-radio-input {
    background-color: $black !important;
    color: $white !important;
}

.h5-switch.black.disabled .h5-switch-input,
.h5-checkbox.black .disabled.checked.h5-checkbox-input,
.h5-radio.black.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $white !important;
}

.h5-switch.white.checked .h5-switch-input,
.h5-checkbox.white .checked.h5-checkbox-input,
.h5-radio.white.checked .h5-radio-input {
    background-color: $white !important;
    color: $white !important;
}

.h5-switch.white.disabled .h5-switch-input,
.h5-checkbox.white .disabled.checked.h5-checkbox-input,
.h5-radio.white.checked.disabled .h5-radio-input {
    background-color: rgb(225, 225, 225) !important;
    color: $white !important;
}