@import url(../../../styles/common/easyvCommon.less);
.modalContainer {
  font-size: 14px;

  :global(.easyv-modal-content) {
    border-radius: 2px;
  }
  :global {
    .easyv-modal-header,
    .easyv-modal-body {
      background-color: var(--easyv-background-6);
    }
    .easyv-modal-header {
      border-bottom-color: #3c404c;
    }
    .easyv-modal-title {
      color: #fff;
    }
  }
  :global(.easyv-modal-body) {
    padding: 0;
  }
}

.modalFooter {
  height: 72px;
  padding: 0px 24px 32px 0px;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  button {
    width: 65px;

    &:first-child {
      margin-right: 8px;
    }

    &:last-child {
      background-color: #ef5350;
      color: #ffffff;
    }
  }
}

.tipContainer {
  padding: 32px 32px 24px 32px;

  .tipTitleContainer {
    margin-bottom: 8px;

    .tipIcon {
      font-size: 20px;
      color: rgb(245, 166, 35);
    }

    .tipTitle {
      font-family: PingFang SC;
      font-style: normal;
      font-weight: 500px;
      font-size: 16px;
      margin-left: 8px;
      color: #ffffff;
    }
  }

  .tipContent {
    display: block;
    font-size: 14px;
    color: #b4b7c1;
    padding-left: 28px;
  }
}

.black {
  :global(.easyv-modal-header) {
    background-color: #22242b;
    border-bottom-color: #36373e;
  }

  :global(.easyv-modal-title) {
    color: #bfbfbf;
  }

  :global(.easyv-modal-close) {
    color: #bfbfbf;
  }

  :global(.easyv-modal-body) {
    background-color: #22242b;
    color: #bfbfbf;
  }

  .tipIcon {
    color: #ed5d4d !important;
  }

  .tipTitle {
    color: #bfbfbf !important;
  }

  .tipContent {
    color: #bfbfbf !important;
  }

  .modalFooter {
    padding: 0px 32px 32px 0px;

    & > button:first-child {
      background-color: #303239;
      color: rgba(255, 255, 255, 0.5);
      border-color: transparent;
    }

    & > button:last-child {
      background-color: #2491f7;
    }
  }
}
