@import "./vars.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: 46px;
  border: 2px solid #d1d1d1;
  background-color: currentColor;
  color: $white;
  border-radius: 6px;
  width: 46px;
  height: 46px;
  position: relative;
  vertical-align: 0;
  top: 5px;
  &::before {
    font-family: "cuIcon";
    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: "cuIcon";
    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: "cuIcon";
      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: "cuIcon";
      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;
  }
  .h5-radio {
    &-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;
      &.h5-radio-input-disabled {
        background-color: #e1e1e1;
        border-color: #d1d1d1;
      }

      &.h5-radio-input-disabled:before {
        color: #adadad;
      }
    }
  }
  &.normal {
    .h5-radio-input::before {
      font-family: "cuIcon";
      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-switch {
  display: inline-block;
  &::before,
  &::after {
    font-family: "cuIcon";
    content: "\e645";
    position: absolute;
    color: #fff !important;
    top: 0;
    left: 0;
    font-size: 26px;
    line-height: 26px;
    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: 26px;
    margin: auto;
  }
  &::before {
    content: "\e646";
    right: 0;
    transform: scale(1, 1);
    left: auto;
  }
  .h5-switch-input {
    border: none;
    padding: 0 24px;
    width: 96px;
    height: 52px;
    margin: 0;
    border-radius: 100px;
    position: relative;
    &.radius,
    &.radius::after {
      border-radius: 6px;
    }
    &::after {
      content: "";
      margin: auto;
      width: 52px;
      height: 52px;
      border-radius: 100px;
      left: 0;
      top: 0;
      bottom: 0;
      position: absolute;
      box-shadow: 0 0 10px $grey;
      transform: scale(0.9, 0.9);
      transition: all 0.2s ease-in-out 0s;
      background-color: $white;
    }
    &:not([class*="bg-"]) {
      background: $grey !important;
    }
  }
  &.checked {
    .h5-switch-input::after {
      margin: auto;
      left: 44px;
      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;
}