@import "../../styles/variable";

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

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

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

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

    &.wx-checkbox-input-checked {
      color: #09bb07;

      &::before {
        // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
        font: normal normal normal 14px/1 "weui";
        content: "\EA08";
        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) {
  :host {
    .wx-checkbox-input {
      border: 1px solid #656565;
      background-color: #2c2c2c;

      &.wx-checkbox-input-checked {
        color: #07c160;
      }

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

        &.wx-checkbox-input-checked {
          background-color: #2b2b2b;
        }

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