@import '../../../../../styles/common/easyvCommon.less';

.black {
  color: #bfbfbf;

  :global {
    .easyv-switch {
      background-color: #383b4a;
    }

    .easyv-modal-content {
      background-color: #2a2e3d !important;
      .easyv-modal-header {
        background-color: #2a2e3d !important;
      }
    }

    .easyv-btn[disabled] {
      background-color: #545454 !important;
      color: #aaaaaa !important;
      border: 0;
    }

    // input {
    //   background-color: #22242b;
    //   border: 1px solid rgba(79, 79, 84, 0.6);
    //   border-radius: 2px;
    //   color: #999999;
    // }

    .easyv-radio-wrapper {
      color: #999;
    }

    .easyv-collapse-item {
      .easyv-collapse-header {
        color: #bfbfbf !important;
      }
    }

    .easyv-modal-body {
      background-color: #2a2e3d !important;
      color: #fff;
    }
  }

  .signature {
    background-color: #22242b;
    border: 1px solid rgba(79, 79, 84, 0.6);
    color: #999999;
  }
}

.item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  :global(.easyv-switch-checked) {
    background-color: #2491f7;
  }

  :global {
    // .easyv-input {
    //   background: rgba(255, 255, 255, 0.12);
    //   color: #fff;
    //   border-color: rgba(53, 57, 73, 1) !important;
    // }

    .easyv-radio-wrapper {
      color: #fff;
    }
  }

  .input();

  .signature {
    border-radius: 2px;
    width: 300px;
  }
}

.collapse {
  :global {
    .easyv-collapse-item {
      .easyv-collapse-header {
        color: rgba(0, 0, 0, 0.85);
        font-size: 12px;
        padding: 0;
        width: 66px;
        text-align: right;

        .anticon-right {
          right: -14px;
          top: 8px;
          left: auto;
        }
      }
    }

    .easyv-collapse-arrow {
      color: #fff !important;
    }

    .icon-btn_delete {
      color: #2491f7;
    }
  }
}

.label {
  width: 76px;
  text-align: right;
  color: #fff;

  &:after {
    position: relative;
    content: ':';
    top: -0.5px;
    margin: 0 8px 0 2px;
  }
}

.app {
  margin-left: 16px;
  display: flex;
  align-items: center;

  &:first-of-type {
    margin-left: 0;
  }
}

.shareInfo {
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
}

.clearAfter {
  &::after {
    content: '';
  }
}

.itemBox {
  position: relative;

  .imageUpload {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 133px;
    background: #252835;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    :first-child {
      border: none !important;
    }

    & > div,
    & > div > div {
      height: 100%;
      width: 100%;
      background: transparent;
    }

    .tip {
      font-size: 12px;
      color: #888;
      position: absolute;
      top: 2px;
      left: 2px;
      width: calc(100% - 4px);
      height: calc(100% - 4px);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    &:hover .tip {
      display: none;
    }
  }
}

.encryption {
  .radio();
}

.loadingWrapper {
  background-color: #fff;
}
