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

.version-selector {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  padding: 30px 13px 20px;

  :global {
    .ant-checkbox-group {
      display: flex;
      flex-direction: column;
      gap: 10px 0;
    }
  }

  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 103px;
    padding: 15px;
    color: @text-color-secondary;
    font-size: 15px;
    border: 1px solid rgba(136, 149, 168, 0.16);
    border-radius: 6px;

    img {
      width: 26px;
      height: 26px;
      margin-bottom: 4px;
    }

    &:hover {
      color: @text-color-secondary;
      background-color: .addAlpha(@primary-color, 0.08) [];
      border: 1px solid transparent;
    }

    &--active {
      color: @primary-color !important;
      background-color: .addAlpha(@primary-color, 0.08) [] !important;
      border: 1px solid @primary-color !important;
    }
  }
}
