@purple-color: #6516ff;

.title(@color, @background) {
  width: 100%;
  margin-bottom: 20px;
  padding: 0 15px;
  color: @color;
  font-weight: 500;
  font-size: @font-size;
  line-height: 42px;
  text-align: center;
  background: @background;
  border-radius: 4px 4px 0 0;
  .singleLine();
}

.text() {
  margin-bottom: 20px !important;
  color: @text-color-secondary;
  font-size: 13px;
  line-height: 22px;
  word-break: break-all;
  .singleLine();
}

.version-container(@background) {
  flex: 1;
  min-width: 0;
  background: @background;
  border-radius: 4px;
}

.version-compare {
  :global {
    .ant-modal-content {
      padding: 40px 40px 25px !important;
    }
    .ant-modal-header {
      margin-bottom: 20px !important;
    }
    .kf-modal-title {
      color: @text-color;
      font-weight: 500;
      font-size: 20px;
    }
  }

  &__container {
    display: flex;
    flex-wrap: nowrap;
    gap: 0 5px;
    align-items: stretch;
    height: 100%;
  }

  &__fields {
    flex: none;
    width: 117px;
    padding: 0 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid .addAlpha(@primary-color, 0.2) [];
    border-radius: 4px;
    box-shadow: 0px 3px 6px .addAlpha(@primary-color, 0.1) [] inset;

    &__title {
      margin-bottom: 20px;
      color: @text-color;
      font-size: @font-size;
      line-height: 42px;
    }
    &__text {
      .text();

      &--different {
        color: @error-color;
      }
    }
  }

  &__left {
    .version-container(.addAlpha(@primary-color, 0.04) []);

    &__title {
      .title(@primary-color, linear-gradient(
        159.9deg,rgba(138, 177, 255, 0.5) 0%,
        rgba(22, 100, 255, 0.5) 100%
      ));
    }

    &__text {
      padding: 0 15px;
      text-align: center;
      .text();

      &--different {
        color: @primary-color;
      }
    }
  }

  &__right {
    .version-container(rgba(100, 30, 237, 0.04));
    &__title {
      .title(@purple-color, linear-gradient(
        159.9deg,
        rgba(193, 138, 255, 0.5) 0%,
        rgba(146, 22, 255, 0.5) 100%
      ));
    }

    &__text {
      padding: 0 15px;
      text-align: center;
      .text();

      &--different {
        color: @purple-color;
      }
    }
  }
}