:host {
  -webkit-tap-highlight-color: transparent;
  display: inline-block;
  cursor: pointer;

  &([hidden]) {
    display: none;
  }
}

* {
  margin: 0;
}

.wx-switch-wrapper {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.wx-switch-input {
  position: relative;
  width: 52px;
  height: 32px;
  margin-right: 5px;
  border: 1px solid #dfdfdf;
  outline: 0;
  border-radius: 16px;
  box-sizing: border-box;
  background-color: #dfdfdf;
  transition: background-color 0.1s, border 0.1s;

  &::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 30px;
    border-radius: 15px;
    background-color: #fdfdfd;
    transition: transform 0.3s;
  }

  &::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s;
  }

  &.wx-switch-input-checked {
    border-color: #04be02;
    background-color: #04be02;

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

    &::after {
      transform: translateX(20px);
    }
  }
}

.wx-checkbox-input {
  margin-right: 5px;
  outline: 0;
  border: 1px solid #d1d1d1;
  background-color: #fff;
  border-radius: 3px;
  width: 22px;
  height: 22px;
  position: relative;
  color: #09bb07;

  &.wx-checkbox-input-checked {
    &::before {
      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
      font: normal normal normal 14px/1 "weui";
      content: "\EA08";
      color: inherit;
      font-size: 22px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -48%) scale(0.73);
      -webkit-transform: translate(-50%, -48%) scale(0.73);
    }
  }

  &.wx-checkbox-input-disabled {
    background-color: #e1e1e1;

    &::before {
      color: #adadad;
    }
  }
}

@media (prefers-color-scheme: dark) {
  .wx-switch-input {
    border: 1px solid rgba(120, 120, 128, 0.16);
    background-color: rgba(120, 120, 128, 0.16);

    &::before {
      background-color: rgba(120, 120, 128, 0.16);
    }

    &::after {
      background-color: #fff;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    &.wx-switch-input-checked {
      border-color: #07c160;
      background-color: #07c160;
    }
  }

  .wx-checkbox-input {
    border: 1px solid #656565;
    background-color: #2c2c2c;
    color: #07c160;

    &.wx-checkbox-input-disabled {
      border: 1px solid #373737;
      background-color: #2c2c2c;

      &::before {
        color: #6b6b6b;
      }
    }
  }
}