/* ==================
        初始化
 ==================== */
@import "./vars";

page,
body {
  /* Color 可以自定义相关配色 */
  /* var属性兼容性 --> https://www.caniuse.com/#feat=css-variables */
  /* 标准色 */
  background-color: $ghostWhite;
  font-size: 28px;
  color: $black;
  font-family: Helvetica Neue, Helvetica, sans-serif;
}

view,
scroll-view,
swiper,
button,
input,
textarea,
label,
navigator,
image,
div,
img {
  box-sizing: border-box;
}

.round {
  border-radius: 5000px;
}

.radius {
  border-radius: 6px;
}

.response {
  width: 100%;
}

/* ==================
          图片
 ==================== */

image,
img {
  max-width: 100%;
  display: inline-block;
  position: relative;
  z-index: 0;

  &.loading {
    &::before {
      content: "";
      background-color: #f5f5f5;
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: -2;
    }

    &::after {
      content: "\e7f1";
      font-family: "cuIcon";
      position: absolute;
      top: 0;
      left: 0;
      width: 32px;
      height: 32px;
      line-height: 32px;
      right: 0;
      bottom: 0;
      z-index: -1;
      font-size: 32px;
      margin: auto;
      color: #ccc;
      -webkit-animation: cuIcon-spin 2s infinite linear;
      animation: cuIcon-spin 2s infinite linear;
      display: block;
    }
  }
}

/* ==================
         开关
 ==================== */

switch,
checkbox,
radio {
  position: relative;
}

switch::after,
switch::before {
  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;
}

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

switch[checked]::after,
switch.checked::after {
  transform: scale(1, 1);
}

switch[checked]::before,
switch.checked::before {
  transform: scale(0, 0);
}

switch {
  .wx-switch-input {
    border: none;
    padding: 0 24px;
    width: 96px;
    height: 52px;
    margin: 0;
    border-radius: 100px;

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

    &::after {
      margin: auto;
      width: 52px;
      height: 52px;
      border-radius: 100px;
      left: 0;
      top: 0;
      bottom: 0;
      position: absolute;
      transform: scale(0.9, 0.9);
      transition: all 0.2s ease-in-out 0s;
    }

    &.wx-switch-input-checked {
      &::after {
        margin: auto;
        left: 44px;
        box-shadow: none;
        transform: scale(0.9, 0.9);
      }
    }
  }
}

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

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

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

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

radio[disabled]::before,
checkbox[disabled]::before {
  font-family: "cuIcon";
  content: "\e645";
  position: absolute;
  color: rgb(225, 225, 225) !important;
  top: 50%;
  margin-top: -16px;
  right: 10px;
  font-size: 32px;
  line-height: 32px;
  pointer-events: none;
  transform: scale(1, 1);
  transition: all 0.3s ease-in-out 0s;
  z-index: 9;
}

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

radio .wx-radio-input,
checkbox .wx-checkbox-input {
  margin: 0;
  width: 48px;
  height: 48px;
}

checkbox.round .wx-checkbox-input {
  border-radius: 100px;
}

switch.radius .wx-switch-input::after,
switch.radius .wx-switch-input,
switch.radius .wx-switch-input::before {
  border-radius: 10px;
}

switch .wx-switch-input::before,
radio.radio::before,
checkbox .wx-checkbox-input::before,
radio .wx-radio-input::before {
  display: none;
}

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

.switch-sex {
  &::after {
    content: "\e71c";
  }

  &::before {
    content: "\e71a";
  }

  .wx-switch-input {
    background: $red !important;
    border-color: $red !important;
  }
}

.switch-sex[checked] {
  .wx-switch-input {
    background: $blue !important;
    border-color: $blue !important;
  }
}

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

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

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

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

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

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

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

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

switch.green[checked] .wx-switch-input,
checkbox.green[checked] .wx-checkbox-input,
checkbox[checked] .wx-checkbox-input,
radio.green[checked] .wx-radio-input {
  border-color: $green !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

switch.gray[checked] .wx-switch-input,
checkbox.gray[checked] .wx-checkbox-input,
radio.gray[checked] .wx-radio-input {
  border-color: $grey !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.safe-area {
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}

button[disabled] {
  opacity: 0.6;
  color: $white;
}

button.icon.lg {
  width: 80px;
  height: 80px;
}